一、引言
在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; } },