Vuex状态管理插件

一、引言

在Vue.js的组件基础中,我们在两个组件之间传值使用的是props(父组件向子组件传值),自定义事件this.$emit方法(子组件向父组件传值),对于简单的组件比较少的,而且依赖不复杂的我们可以使用,但是,如果组件很多,而且依赖很复杂,两个组件不一定是父子关系,而且关系比较远的时候,如果我们还是使用传统的传值方式,那将会是一场灾难(两个距离比较远的组件如果使用传统方式,需要通过可能比较多的中间组件进行传值),因此Vuex诞生了,Vuex可以看作是一个基于缓存的状态管理工具,我们在其store中存储相应的data属性传和方法,两个组件不论是何处,都通过中间的Vuex来传递数值和方法,这样我们就从混乱中解放了。

二、Vuex的安装及配置

安装vuex

cnpm i vuex -D

根目录下新建sore文件夹,在其中新建index.js

import Vue from 'vue'; import Vuex from 'vuex';   Vue.use(Vuex)

在main.js中引入这个index.js,并注册vuex

import Vue from  'vue' import VueRouter from 'vue-router' //引入vuex的index.js import store from './vuex/store/index.js'   Vue.use(VueRouter)   var router = new VueRouter({      })   new Vue({       el: '#app',       router,       store,//使用store })

三、state状态对象

state状态对象,管理一组变量的值,我们通常使用的是将其赋值给组件中data属性,有三种方法。

var store = new Vuex.Store({      state:{         msg:"Vuex's msg"      } }); export default store

1.通过computed的计算属性直接赋值

当state对象发生变化时,就会重新计算,因此data中获得的数据一定是最新的。

computed:{    msg(){        return this.$store.state.msg; }

2、通过mapState的对象来赋值

import {mapState} from 'vuex';   computed:mapState({        msg:state=>state.msg  //传入state对象,将state.msg赋值给msg })

3.通过mapState的数组来赋值

上面的第二种的简写方式,推荐此方式

import {mapState} from 'vuex';   computed:mapState(["msg"])

四、mutations修改state状态

如果需要修改state中的状态值,我们需要通过mutations定义方法来修改

参数第一个是state,第二个才是传入的值,可以是一个单传或者一个对象,如果是多参数一定要组成对象

var store = new Vuex.Store({      state:{         msg:"Vuex's msg"      },      mutations:{         updateMsg(state,str){             state.msg += str;         }, }); export default store     //以下为伪代码 object={msg:'str",age:20}  updateMsg(state,object){             state.msg += object.msg;         },

在组件中使用

<button @click="$store.commit('updateMsg','newVal')">修改msg</button>

同样我们也可以使用其简写方式

//组件中引入mapMutations import { mapState,mapMutations } from 'vuex';   //methods中注册mapMutations中的方法 methods:{        mapMutations([             'updateMsg'    }]),   //直接使用mapMutations中的方法 <button @click="reduce('newVal')">修改msg</button>

五、getters属性

在获取state中数据之前对数据进行加工。

var store = new Vuex.Store({      state:{         msg:"Vuex's msg"      },      getter:{         msg:state -> state.msg + "newVal"; }); export default store   //在vue 的构造器里边只能有一个computed属性,如果你写多个,只有最后一个computed属性可用,所以要对computed属性进行一个改造,使用运算符”…”。 computed:{         ...mapState(["msg"]),         msg(){             return this.$store.getters.msg;         } },   //简写方式 import { mapState,mapMutations,mapGetters } from 'vuex';   computed:{        ...mapGetters(["msg"]), },

六、actions异步修改state状态

var store = new Vuex.Store({      state:{         msg:"Vuex's msg"      },      actions:{         //context理解为store本身,         //使用commit方法调用mutations里边的方法         updateAction(context){           context.commit('updateMsg','newVal')         },         //方法2,直接传入commit对象          updateAction({commit}){            commit('updateMsg','newVal')         } }); export default store

使用方法

import { mapState,mapMutations,mapGetters,mapActions } from 'vuex';     //methods中注册mapMutations中的方法 methods:{        ...mapMutations([             'updateMsg'         },        //注册actions        ...mapAction([           'updateAction'       ]) ]),   //html中直接使用  <button @click="updateAction">按钮</button>

七、module模块组

随着项目的越来越大,我们共享的状态会越来越多,这时我们就需要把状态及其操作进行分组。

const moduleA={      state,mutations,getters,actions }   const moduleB={      state,mutations,getters,actions }   export default new Vuex.Store({         modules:{a:moduleA},         modules:{b:moduleB}, })   //合并写法 export default new Vuex.Store({         modules:{                 a:{                      state,mutations,getters,actions                   },                 b:{                      state,mutations,getters,actions                   }                 }, })     <h1>{{$store.state.a.msg}}</h1> computed:{         msg(){             return this.$store.state.a.msg;         } },

您可能还会对下面的文章感兴趣: