Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

1. 调用和传参

• 首先找到 store/index.ts， 这里已经有写好的 Vuex 模板，红框部分先改掉

• 改成 const store =

• 在 main.ts 里给 new Vue 传 store（最后检查有无 export default store;至此初始化完成）

• Vuex 里的 state 就相当于 data， mutations 就相当于 methods，不过在 Vuex 里不能直接调用 mutations

• 看下图示例代码：我需要调用 increment 这个方法不能直接通过store.mutations.increment();调用，除非我自己传 state，像这样store.mutations.increment(state.count);。

• 所以在 Vuex 是有给我们封装好的 commit以供使用，以字符串的形式调用，如 store.commit('increment');即可

• 使用commit传参怎么做？看下图示例代码：

2.在 Vue 组件中获得 Vuex 状态

• 由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性 (computed) 中返回某个状态

• 使用 computed 的原因是因为会自动计算依赖，依赖变了，上图代码中的 count 也会变

示例代码方法一：

写 mutations

在画面显示 count 并添加一个 +1 的 button， @click 调用 add 方法

import 引入一下

写 computed 和 add 方法

示例代码方法二：

• 不需要写 add 方法，写 computed 后直接用 $store.commit 即可

• 小提示： 我甚至可以不 import store ，把 computed 里的return store.state.count改成return this.$store.state.count效果也是一样的

• 功能正常

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓<点击+1后>↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

---

另外

• 下图中的Vue.use(Vuex); 是把 store 绑到 Vue.prototype.$store = store

---

总结

读 时用 computed:{ }，如：

@Component({
    ...
    computed:{
        count(){
            return store.state.count
        }
    }
    ...
})

写 用 $store.commit('方法名'， 参数)，如：

<button @click="$store.commit('increment',1)">+1</button>