Vuex官方例子解读


安装

npm i vuex
// or
yarn add vuex

Vuex 是什么

  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
    它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

    核心概念

  • State
    • 单一状态树,用一个对象就包含了全部的应用层级状态
  • Getter
    • 相当于 State 的计算属性
  • Mutation
    • 提交 mutation是更改 store 中状态的唯一方法, 相当于事件
  • Action
    • 类似于 mutation, 但 Action 提交的是 mutation,而不是直接变更状态,而且可以包含任意异步操作
  • Module
    • 将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter
  • 官方购物车项目结构
    ├── index.html
    ├── main.js
    ├── api
    │   └── ... # 抽取出API请求
    ├── components
    │   ├── App.vue
    │   └── ...
    └── store
        ├── index.js          # 我们组装模块并导出 store 的地方
        ├── actions.js        # 根级别的 action
        ├── mutations.js      # 根级别的 mutation
        └── modules
            ├── cart.js       # 购物车模块
            └── products.js   # 产品模块

    注意点

  • 在 mutation-types.js 中定义类型常量,默认全部大写 —> 把常量放在单独的文件中可以让你的代码合作者或者迭代者对整个 app 包含的 mutation 一目了然
  • Vuex- Action的 { commit }
    // Vuex 中 使用 Action 处理异步请求时,常规写法如下
    getMenuAction:(context) =>{
        context.commit('SET_MENU_LIST',['承保2','核保2'])
    }
    // 我们也可以使用如下简化写法,如下
    actions:{
        getMenuAction:({commit}) =>{
            commit(SET_MENU_LIST,[‘承保2,’核保2])
        }
    }
    
    // { commit } 是变量解构赋值
    context = { 
        dispatch: local.dispatch,
        commit: local.commit,
        getters: local.getters,
        state: local.state,
        rootGetters: store.getters,
        rootState: store.state
    }
    // 常规写法 context.commit = context.local.commit
    // 使用变量解构赋值后 { commit } 相当于 commit= context.commit
    
    // state 同理

  目录