1、vuex数据传递的流程
当组价需要修改state中的数据的时候必须通过dispatch来触发actions里面的方法,actions的每一个方法里面都会有一个
commit方法,用来触发mutations里面的方法, mutations用来修改state中的数据。当mutations里面的方法触发的时候数据
就会发生改变,因为数据是响应式因此组件中的数据也会发生改变
2、vuex中5个属性主要的作用
3、如何在多人协作中实现数据的模块化
4、当刷新页面的时候vuex中的数据丢失如何解决
在vuex中必须遵循单项数据流
vuex中的辅助函数 actions 与 mutations 的辅助函数必须在组件的methods里面进行使用,
state的辅助函数必须要在computed中使用
state
用来存储各个组件中公有的状态
如何访问到vuex state中的数据
this.$store.state.属性
mapState辅助函数
用法一、
computed:Vuex.mapState(["state中的属性"])
用法二:
computed:Vuex.mapState({
num:"n",
todoVal:"inputVal"
}),
用法三:
computed:Vuex.mapState({
num:state=>state.n,
todoVal:state=>state.inputVal
}),
最终写法:
computed:{
...Vuex.mapState({
num:state=>state.n,
todoVal:state=>state.inputVal
})
},
actions
用来处理异步 以及一些业务逻辑
actions里面所以的函数都会有2个参数
参数1 为一个对象 包含{commit dispatch state}
参数2:是传递过来的参数
actions里面的方法如果想要触发的时候必须通过dispatch
辅助函数
mapActions
方案一:
methods: {
...Vuex.mapActions(["handleAdd"])
}
方案二:
methods: {
...Vuex.mapActions({
Add:"handleAdd"
})
}
mutations
用来做数据的增删改查 mutations里面的方法用来修改state中的数据
mutations里面的所有函数都会有2个参数
参数1:state
参数2:传递过来的参数
mutations里面的方法想要触发的时候必须通过commit
辅助函数
mapMutations
methods: {
...Vuex.mapMutations(["handleMutationAdd"])
}
methods: {
...Vuex.mapMutations({
handleMutationAdd:"handleMutationAdd"
})
}
getters:
getters就相当于组件中的computed一样,也是可以进行数据的缓存
主要的作用:监听state中数据的变化,当state中的数据发生改变的时候就会触发getters里面的方法
getters中的每一个函数都会有一个参数 这个参数是state
辅助函数
mapGetters
computed:{
...Vuex.mapGetters(["方法名称"])
}
computed:{
...Vuex.mapGetters({
key:"方法名称"
})
}
modules:
做模块的划分
在多人协作中,如果不按照模块的划分来管理数据的话,会导致当前store的数据难以管理
因此我们需要按照模块来去划分。(一个粮仓,大米仓库,小米的仓库,高粱的仓库)
一定要在子模块中写一个属性namespaced:true 这样每一个模块都有自己独立的作用域了
如何保存vuex的数据状态?
使用浏览器自带的localStorage进行存储
存储:
localStorage.setItem(key,val)
获取:
localStorage.getItem(key)