什么时候使用 vuex？

  1. 当一个组件需要多次派发事件时
  2. 跨组件、页面共享数据

如：

  1. 状态栏高度
  2. 请求基地址
  3. 图片基地址
  4. 登录状态
  5. 用户信息
  6. 购物车
  7. 选择东西后，返回界面，会更新你选择的东西（避免每次进入页面都重新请求）

    vuex执行过程：

    组件派发任务给 actions，actions 触发 mutations 中的方法，
    mutations 来改变 state 中的数据，数据变更后响应推送给组件，组件重新渲染

    vuex核心：

    state：储存共享的数据

    1. state: {
    2.  token: '',
    3.  变量名: null
    4. }

mutations：修改state中的数据，处理本地缓存

  1. mutations: {
  2.     方法名(state, params){
  3.         state.变量名 = params
  4.     }
  5. }
  7. // 在方法中，通过 commit 提交给 mutations 修改 state 的状态
  8. method: {
  9.     open() {
  10.         this.$store.commit("方法名", 参数);
  11.     }
  12. }

actions：异步调用接口获取数据，通过 dispath 派发给 actions，让 actions 触发 mutations

  1. actions: {
  2.     async 方法名({ commit }, data) {
  3.         const res = await 接口名(data)
  4.         if (res.code === 1) {
  5.             commit('mutations中的方法名', res.data)
  6.         }
  7.         return res;
  8.     }
  9. }
  11. // 在方法中使用：通过 dispath 派发给 actions，让 actions 触发 mutations
  12. method: {
  13.     open() {
  14.         this.$store.dispath('方法名', 参数)
  15.     }
  16. }

getters：用于获取state中的数据，可以进行修饰（相当于计算属性）

  1. getters: {
  2.     方法名: state => {
  3.         if (state.变量名 && Objdect.keys(state.变量名)) 
  4.             return state.变量名
  5.         } else {
  6.             return uni.getStoragesSync('键名') || {}
  7.         }
  8.     }
  9. }
  11. // 在计算属性中使用
  12. computed: { 
  13.         this.$store.getters.方法名
  14. },

modules 将store按功能分割成模块

每个模块拥有自己的 state、mutations、actions、getters