1. 安装 ``` npm i vuex -s ``` 2. 创建数据存储对象 store.js ```js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { // 专门用来存储公共数据 count: 0, // 如果组件想要访问 state 的数据，需要 this.$store.state.*** 访问 }, mutations: { // 如果要操作 store 中的 state 值，只能通过调用 mutations 中的方法 increment(state) { // 组件使用this.$store.commit('方法名')使用store中的方法 state.count++ }, subtract(state, c) { // 最多传两个参，第一个固定为 state，第二个自定义可以为对象 state.count -= c; } }, getters: { // 这里的 getters，负责对外提供数据 optCount: function(state) { return '当前最新的count为：' + state.count } }, actions: { } }) ``` 3. 使用 state 中的数据 ```html <h3>当前数量为：{{ $store.state.count }}</h3> ``` 4. 使用 mutations 中的方法 ``` js methods: { add() { this.$store.commit('increment'); }, reduce() { this.$store.commit('subtract', 2); } } ``` 5. 使用 getters 中处理过的数据 ```html <h3>{{ $store.getters.optCount }}</h3> ```