vuex全局状态管理

• 多组件之间共享状态（多组件之间共享数据）
• 单向数据流，组件内部只能使用，不能修改
• 当全局状态发生改变，所有使用此状态的组件都改变

vuex和localStorage的区别？

1. vuex存储的数据在内存中
   localStorage的数据以文件形式存储在本地
2. 当我们刷新页面时
   vuex的数据将会丢失
   localStorage的数据不会丢失
3. vuex用于多组件之间共享数据
   localStorage用于多页面之间共享数据

但是！！
vuex为数据响应式！！ 数据变 -> 视图变（dom更新）
当一个组件触发全局状态改变时，其他组件也跟着改变！！

如何来使用vuex？

1. 安装vuex
2. 创建一个全局状态仓库
3. 引入Vue Vuex模块
4. 使用Vue.use(Vuex)
5. 创建状态仓库对象
6. 导出仓库对象
7. 在main.js中引入并在vue实例注册store
8. 配置设置。。。。
9. 在组件中如何使用

state

• 全局的状态（数据）
• 单向数据流，组件中只能使用，不能修改
• 在组件中访问state：this.$store.state.xxx 可以获取数据
• this.$store.state.xxx = yyy 不推荐，devtools没有修改记录

mutations

• 提供了修改state的方法(直接修改)
• 只能在 mutations 中去修改state
• 管理同步操作
• 在组件中使用this.$store.commit(mutations中的方法，数据)修改state

actions

• 提供了修改state的方法
• 调用mutations中的方法来修改state(间接修改)
• 管理异步操作
• 在组件中使用this.$store.dispatch(actions中的方法，数据)
• actions中的方法再调用store.commit(mutations中的方法，数据)修改state

getters

• 全局的计算属性，类似组件中的计算属性
• 用于计算返回一个值，所有组件都可以使用
• 根据 state和其他的getter进行计算

modules

• 划分模块
• 避免store对象过于庞大，不方便使用和维护

namespaced: true

• 添加命名空间
• 未添加命名空之前：this.$store.commit(‘setMsg’,‘123’) 访问全局的mutations方法setMsg
• 添加命名空之后：this.$store.commit(‘home/setMsg’,‘123’) 访问的是home模块中的mutations的setMsg