vue的数据管理(vuex)

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)