什么是vuex
vuex是一个专门为vue.js所开发的状态管理模式。
他采用集中式存储管理所有的组件的状态,并以相应的规则保证状态以一种可预测的方式进行改变。 可以简单地将其理解为vue中创建了一个对象,里面包含了各种需要在各个组件间共享的变量。
vuex的基本使用
1. 引入插件
Vue.use(Vuex)
2. 创建对象
const store= new Vuex.store({
strict: true //一定使用mutation修改变量
state:{ //保存数据的对象
}
})
3. 导出对象
export default store
vuex 改变变量
通过 this.$store.state来获取变量
vue官方建议通过mutation来修改vuex中的变量
vuex中的核心变量
1.state
用于存储vuex中的变量
2.getters
该方法类似于vuex中的组件方法computed,可以对vuex中的属性进行计算
使用方法:
this.$store.getter.maxNum //maxNm为定义在getter中的某个方法
当想在getter中定义的函数传参数时,可以使用下述方法:
eldestPeople(state){
return function(age){
// 在state中定义了一个students数组,这个方法用于将该数组中的年龄小于10的过滤掉
return state.students.filter(s=>s.age>10)
}
}
3.mutation
当要传给mutation中的函数是有参数的时候:
vue中的组件调用:
addCount(count){
this.$store.commit('incrementCount',count)
}
在vuex中还有其他的提交风格:
addCount(count){
this.$store.commit({
type:'incrementCount',
age,
count=18
})
}
在这种提交风格中,所传参数则变成了一个对象,需要在mutation中以(count.age方式取出),并且建议在mutation中
以payload命名参数。
在mutation中:
incrementCount(state,count){
state.counter+=count
}
当mutation想要进行响应式的布局时,前提是应该在store.state中定义好原有的变量,否则是不会有响应式的。
当要新增变量或者删除变量并且使得二者是响应式的时候,我们可以使vue.set(state.info,key,value)或者
vue.delete(state.info.key)。
当使用 delete state.info.age时,无法做到响应式。
mutation内函数应该为同步函数,当为异步函数时,devtools捕捉不到state中的改变。如果要在
mutation中使用异步函数,需要在action中使用。
4.action
action中的默认变量为context,与store中的state属性一样,可以通过context.commit来提供一个mutation,而在
action中使用$store.dispatch来分发action,即执行action中的函数,action中的函数一般就是用于提交mutation。
通常提交的mutation包含一个函数,定义在mutation中。
5.module
当state中的定义的状态量变多时,我们可以将state中的变量划分为不同的模块,并且每个模块中也会有自己的
state,mutation,getter,actions等属性。
vuex中的单一状态树
当有多个状态时,系统管理会变得十分困难。