Vuex详解

Vuex详解

一.Vuex是做什么的?

官方解释:Vuex是一个专为Vue.js应用程序开发的状态管理模式

 

二.状态管理到底是什么?

状态管理模式,集中式储存管理这些名词听起来就很高大尚,让人捉摸不透.

其实,你可以简单的将其看成把需要多个组件共享的变量全部储存在一个对象里面.

然后,将这个对象放在顶层的Vue实例中,让其他组件可以使用.

那么,多个组件是不是就可以共享这个对象中的所有标量属性了呐?

1.普通共享的方法:

const shareobj = {
    name:"kobe"
}
Vue.prototype.shareobj = shareobj
​
Vue.component(cpn,{
    this.shareobj.name
})
​
Vue.component(cpn2,{
    this.shareobj.name
})
​
const app = new Vue({
    el:"#app",
    data:{
}
})
//注意:但是这种方法不能做到响应式

2.getters计算属性的用法

什么时候用计算属性:

当我们state中的属性需要发生一系列变化的时候再进行展示;这个时候就会用到计算属性

 

Vuex中的五大核心概念;也是他的五个核心参数:

1.State: 状态保存

2.Getters: 可以理解为计算属性

3.Mutation: 外部组件对state里面的值进行修改时;必须通过这个参数来修改(在给Mutation提交的时候用commit)

4.Action:  用来出来网络请求(在给Action提交的时候用 dispatch)  在Action中向Mutation提交的时候(context.commit())

5.Module:  如果参数比较多可以通过这个参数进行抽离;  他里面也有五个参数;和Vuex五大参数一样

创建Vuex的js文件import Vue from 'vue'import Vuex from 'vuex'​//1.安装vuexVue.use(Vuex)

//创建对象
//这里一旦创建完毕;就去我们的main.js里挂载这个Vuex对象
//因为一旦挂载了Vue内部就会将Vuex对象赋值给 Vue.prototype.$store;
　这样我们就可以在别的组件通过$store拿到这个Vuex对象里的属性及方法了(温馨补充:vue-router也是这个原理)
const store = new Vuex.Store({
  //参数一
  state:{
    counter:1000,
    student:[
      {id:111,name:"张三",age:18,gender:170},
      {id:222,name:"李四",age:18,gender:169},
      {id:333,name:"王麻子",age:32,gender:162},
      {id:444,name:"四不像",age:30,gender:168},
    ],
　　info:{name:"张三",age:"300",height:0.88}
  },
  //参数二: 如果要修改state里面的值;官方要求必须在mutations里面修改
　　(因为我们到时候会给浏览器安装一个插件Devtoods这个插件会记录我们的修改状态;这样当state的状态改变时我们就会知道是哪个组件进行修改的)
  mutations:{
    //定义方法
    increment(state){
      state.counter++
    },
    decrement(state){
      state.counter--
    },
　　updateInfo(state){
　　　　state.info.name = "蛋蛋"
　　}
  },
  //参数三:做异步操作
  actions:{
　　aupdateInfo(context){
　　　return　new Promise((resolev,reject) =>{
　　　　　　    setTimeout(()=>{
　　　　　　      context.commit('updateInfo')
　　　　　　      resolev()
　　　　       },5000)
　　       })
　​ }　　
  },
  //参数四:类似于计算属性
  getters:{
    more20stu(state){
     //filter函数的作用是遍历列表,它里面传入的也是一个函数,s是它的参数;表示它遍历出的每个对象
      return state.student.filter(s => { 
        return s.age > 20
      })
    },
    //下面这个函数是获取大于20岁的人数;传入的getters就是上面的getters;这里默认的第二个参数就是getters
    more20stulenth(state,getters){
       return getters.more20stu.lenth
    },
      
    //下面这个函数表示年龄标准有用户自定义$store.getters.moreAageStu(用户传入年龄)
　　//其他组件想给getters里的方法传参的话就必须按下列方法写了

    moreAageStu(state){
        return function(age){
            return state.student.filter(s =>{
                return s.age > age
            })
        }
    }
  },
  //参数五:划分模块
  modules:{
​
  }
​
})
​
//导出store独享
export default store

下面这块代码是在组件中如何展示store里的参数的:

<template>
<h2>{{$store.state.counter}}</h2>
<button @click="addition">+</button>
<button @click = "subtraction">-</button>
<h2>{{$store.state.info}}<h2>
<button @click="updateIfo">修改内容</button>

//这里展示的是getters对 state 数据进行处理后的展示;这里展示的是年龄大于20岁的学生
<h1>{{$store.getters.more20stu}}</h1>
</template>


<script>
export default {
    name:"组件名称",

    methods:{
        addition(){

        this.$store.commit ("increment") //在这里调用的时候必须用commit进行提交

        },
        subtraction(){

        this.$store.commit ("decrement")

        },
　　　　updateInfo(){
　　　　　　this.$store.dispatch("aupdateInfo").then(()=>{console.log("里面完成了提交")})
　　　　}

    }

}
</script>  

<style>


</style>      

3.Mutation状态更新:

Vuex的store状态的更新唯一方式:提交Mutation

Mutation中主要包括两部分:

字符串的事件类型(type)

一个回调函数(handler),该回调函数的第一个参数就是state

Mutation的提交风格:

通过commit进行提交是一种普通的方式

Vue还提供了另外一种风格,他是一个包含type属性的对象

this.$store.commit({
​
•       type:'changCount',
​
•       count:100
​
})

Mutation中处理方式是将整个commit的对象作为payload使用.所以代码没有改变;依然如下:

changCount(state,payload){
​
•       state.count = payload.count
​
}

下面的代码是Mutation属性的详细用法:import Vue from 'vue'

import Vuex from 'vuex'
​
//1.安装vuex
Vue.use(Vuex)
​
//创建对象
const store = new Vuex.Store({
  //参数一
  state:{
    counter:1000,
    student:[
      {id:111,name:"张三",age:18,gender:170},
      {id:222,name:"李四",age:18,gender:169},
      {id:333,name:"王麻子",age:32,gender:162},
      {id:444,name:"四不像",age:30,gender:168},
    ]
  },
    
  // 组件中的代码 :
  //参数二:state中的属性值变化修改必须通过这里
   methods:{
    addition(){
     this.$store.commit('increment')
   },
    subtraction(){
      this.$store.commit('decrement')
    },
    addCount(count){
    this.$store.commit('incrementCount',count)
      }
  }

                             
//下面是Vuex中的代码:                          
  mutations:{
    //定义方法
    increment(state){
      state.counter++
    },
    decrement(state){
      state.counter--
    },
     //这里的count是组件里传过来的参数;和上面组件中的addCount(count)是对应的
    incrementCount(state,count){
        state.counter += count
    }
  }

​
//导出store独享
export default store

---

最后总结一些Mutation的响应式规则:
1.Vue的store中的state是响应式的;当state中的数据发生改变时,Vue组件会自动更新
2.下面我们必须遵守的一些Vuex对应的规则
　　***提前在store中初始化好所须的属性(这样vue内部会将初始化好的属性自动添加到响应式系统中去;并实时监听属性的变化)
　　　***当给state中的对象添加新的属性时;使用下面的方式:
　　　　方式一  使用Vue.set(obj,"newProp",123)
　　　　　　方式二  用新对象给旧对象重新赋值
　　　　　　补充:如果删除state里面的属性用 vue.delete(object,'xxxx')