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> ```