actions

 用法

1. Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象

2. 你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters

3. 实践中，我们会经常用到 ES2015 的 参数解构 (opens new window)来简化代码

```js

 def({ state, commit }) {

      // context 直接解构出来

    },

```

4. Action 通过 store.dispatch 方法触发

```js

// 两个参数的方式

      this.$store.dispatch("abc", { name: "张三" });

      // 对象的方式

      this.$store.dispatch({

        // 必须有 type 属性，值就是 动作的名字

        type: "abc",

        name: "张三",

      });

```

 区别

1. Action 类似于 mutation，不同在于：

2. Action 提交的是 mutation，而不是直接变更状态。

Action 可以包含任意异步操作

getters

 相对于对当前的state做一层 计算属性

 getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算

1. Getter 接受 state 作为其第一个参数

2. Getter 也可以接受其他 getter 作为第二个参数

3. 访问

 - 通过属性访问

Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值

- 通过方法访问

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性

4. 注意：

- getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的

- getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果

 modules

- Vuex 允许我们将 store 分割成模块（module）,每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

1. 接收的第一个参数是模块的局部状态对象

2. 对于模块内部的 action，局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState

3. 对于模块内部的 getter，根节点状态会作为第三个参数暴露出来

命名空间

如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名

1. 得到

```js

 ...mapState("cart", ["cartList"]), // 第一个参数是模块的名字

 ...mapGetters("cart", ["length", "total"]),

```

2. 使用

`this.$store.commit("cart/addGood");`

 vue中v-model的使用

- 计算属性得到仓库中的数据

- input输入改变--->计算属性的set---->mutations的方法

 ui组件库

### pc端

- element-ui 饿了么团队

- iview

### 移动端

- vant 有赞

- mintui