Vuex
作用:为Vue.js开发的状态管理工具,集中式存储管理应用的所有组件的状态,实现不同组件之间数据传递。npm i vuex --save
store
store中的数据可以共享给其他任意位置,在调用时使用store.state或this.$store.state访问store中的数据。单个数据可以使用computed返回某个状态,多个数据需引入mapState辅助函数生成计算属性
//store.js
export default new Vuex.store({
state:{
count:0,
msg:'hello'
},
getter:{
reverseMsg(){ return state.msg.splice('').reverse().join('') }
}
})
//调用时
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
computed:{
mapState({
count: state => store.state
})
}
}
当映射的计算属性的名称与 state 的子节点名称相同时,可以给 mapState 传一个字符串数组。
computed:{
mapState(['count']) 映射 this.count 为 store.state.count
}
mapState 函数返回的是一个对象,使用对象展开运算符将多个对象合并为一个,将最终对象传给 computed 属性
computed:{
...mapstate(['count','msg'])
...mapState({num:'count',message:'msg'})//修改映射计算属性的名字,count生成的计算属性名称为num
}
Getter
可以从 store 中的 state 中派生出一些状态,例如对列表进行过滤并计数。与state相同也可使用重命名
computed:{
...mapGetters(['reverseMsg'])
}
Mutation
唯一可以修改Vuex中store状态的方法,不能处理异步操作,按照调用顺序或者commit提交的顺序触发事件。调用mutition方法需要使用store.commit 方法。利用actions属性可以实现异步处理
// Vuex文件
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state,payload) {
// 变更状态
state.count+=payload
}
}
})
// 调用时
store.commit('increment',10)
//或在method中...mapMutation(['increment')]后increment(3)
Mutation 操作数据之前必须保证store中存在初始化好的属性,如果需要给store中添加新属性用Vue.set(obj, 'newProp', 123)
设置
Action
通过action 提交mutation,而不是直接修改store中的数据,action中的需要传入context,内部包含commit,dispatch,state等方法,可将commit等方法解构出来使用
actions: {
increment (context) {
context.commit('increment')
}
}
store.dispatch('increment')//触发action
store.dispatch({
type:'incrementAsync',
amount:10
}) //通过对象方式分发
context 与 store功能完全相同,所以调用context.commit方法提交mutation,通过store.dispatch触发action
Moudle
Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。
调用模块中的state时需要加上模块名称,模块中的Mutation和Action与store中的Mutation和Action一样都在_Mutation和_Actions中无需添加模块名称,store和模块中的Mutation和Action重名则都会被调用。可开启模块中的命名空间。
// 定义的模块内部导出时添加namespace属性。
export default {
namespace: true,
state,
getters,
mutations,
actions
}
//调用时在mapMutation和mapState中书写定义命名空间
...mapState('引入模块的名称',['模块的数据'])
methods:{
...mapMutation('引入的模块名称',['模块中的方法'])
this.模块中的方法(['传入的参数'])
}
严格模式
vuex提供了严格模式使用strict: true
限制对store中的数据进行脏操作,会报错数据发生修改。