一、基本用法
1. 初始化並創建一個項目
vue init webpack-simple vuex-demo cd vuex-demo cnpm install
2. 安裝 vuex
cnpm install vuex -S
3. 在 src 目錄下創建 store.js 文件，並在 main.js 文件中導入並配置
store.js 中寫入
import Vue from 'vue' //引入 vuex 並 use import Vuex from 'vuex' Vue.use(Vuex)
main.js 文件
import Vue from 'vue' import App from './App.vue' import store from './store' //導入 store 對象 new Vue({ //配置 store 選項，指定為 store 對象，會自動將 store 對象注入到所有子組件中，在子組件中通過 this.$store 訪問該 store 對象 store, el: '#app', render: h => h(App) })
4. 編輯 store.js 文件
在應用 vuex 之前，我們還是需要看懂這個流程圖，其實很簡單。
vuex
① Vue Components 是我們的 vue 組件，組件會觸發（dispatch）一些事件或動作，也就是圖中的 Actions；
② 我們在組件中發出的動作，肯定是想獲取或者改變數據的，但是在 vuex 中，數據是集中管理的，我們不能直接去更改數據，
所以會把這個動作提交（Commit）到 Mutations 中；
③ 然后 Mutations 就去改變（Mutate）State 中的數據；
④ 當 State 中的數據被改變之后，就會重新渲染（Render）到 Vue Components 中去，組件展示更新后的數據，完成一個流程。
Vuex 的核心是 Store（倉庫），相當於是一個容器，一個 Store 實例中包含以下屬性的方法：
state 定義屬性（狀態 、數據）
store.js 中寫入
// 定義屬性（數據） var state = { count:6 } // 創建 store 對象 const store = new Vuex.Store({ state }) // 導出 store 對象 export default store;
方式1、 在 app.vue 中就能通過 this.$store 訪問該 store 對象 ，獲取該 count 。
<template> <div id="app"> //把 count 方法直接寫入，可自己執行 <h1>{{count}}</h1> </div> </template> <script> export default { name: 'app', computed:{ count(){ //返回獲取到的數據 return this.$store.state.count } } } </script>
方式2、vuex 提供的 mapGetters 和 mapActions 來訪問
mapGetters 用來獲取屬性（數據）
① 在 app.vue 中引入 mapGetters
import {mapGetters} from 'vuex'
② 在 app.vue 文件的計算屬性中調用 mapGetters 輔助方法，並傳入一個數組，在數組中指定要獲取的屬性 count
<script> import {mapGetters,mapActions} from 'vuex' export default { name: 'app', computed:mapGetters([ //此處的 count 與以下 store.js 文件中 getters 內的 count 相對應 'count' ]) } </script>
vuex官方說明：
Vuex 允許我們在 store 中定義“getter”（可以認為是 store 的計算屬性）。就像計算屬性一樣，getter 的返回值會根據它的依賴被緩存起來，
且只有當它的依賴值發生了改變才會被重新計算。
Getter 接受 state 作為其第一個參數：
const store = new Vuex.Store({ state: { todos: [ { id: 1, text: '...', done: true }, { id: 2, text: '...', done: false } ] }, getters: { doneTodos: state => { return state.todos.filter(todo => todo.done) } } })
mapGetters 輔助函數僅僅是將 store 中的 getter 映射到局部計算屬性：
computed: { // 使用對象展開運算符將 getter 混入 computed 對象中 ...mapGetters([ 'doneTodosCount', 'anotherGetter', // ... ]) }
如果你想將一個 getter 屬性另取一個名字，使用對象形式：
...mapGetters({ // 把 `this.doneCount` 映射為 `this.$store.getters.doneTodosCount` doneCount: 'doneTodosCount' })
https://vuex.vuejs.org/zh/guide/getters.html
③ 在 store.js 中定義 getters 方法並導出
getters 用來獲取屬性
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 定義屬性（數據） var state = { count:6 } // 定義 getters var getters={ //需要傳個形參，用來獲取 state 屬性 count(state){ return state.count } } // 創建 store 對象 const store = new Vuex.Store({ state, getters }) // 導出 store 對象 export default store;
這樣頁面上就會顯示傳過來的數據了！接下來我們來通過動作改變獲取到的數據
④在 store.js 中定義 actions 和 mutations 方法並導出
actions 定義方法（動作）,可以使異步的發送請求。
commit 提交變化，修改數據的唯一方式就是顯示的提交 mutations
mutations 定義變化，處理狀態（數據）的改變
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 定義屬性（數據） var state = { count:6 } // 定義 getters var getters={ count(state){ return state.count } } // 定義 actions ，要執行的動作，如流程的判斷、異步請求 const actions ={ // ({commit,state}) 這種寫法是 es6 中的對象解構 increment({commit,state}){ //提交一個名為 increment 的變化，名字可自定義，可以認為是類型名，與下方 mutations 中的 increment 對應 //commit 提交變化，修改數據的唯一方式就是顯式的提交 mutations commit('increment') } } // 定義 mutations ，處理狀態（數據） 的改變 const mutations ={ //與上方 commit 中的 ‘increment' 相對應 increment(state){ state.count ++; } } // 創建 store 對象 const store = new Vuex.Store({ state, getters, actions, mutations }) // 導出 store 對象 export default store;
⑤ 在 app.vue 中引入 mapActions ，並調用
mapActions 用來獲取方法（動作）
import {mapGetters,mapActions} from 'vuex'
調用 mapActions 輔助方法，並傳入一個數組，在數組中指定要獲取的方法 increment
<template> <div id="app"> //這個 increment 方法與下面 methods 中的 increment 相對應 <button @click="increment">增加</button> <button>減少</button> <h1>{{count}}</h1> </div> </template> <script> import {mapGetters,mapActions} from 'vuex' export default { name: 'app', computed:mapGetters([ 'count' ]), methods:mapActions([ //該 increment 來自 store.js 中導出的 actions 和 mutations 中的 increment 'increment', ]) } </script>
這樣就能通過 button 來改變獲取到的 count 了。
看起來確實是挺繞的，需要在理解了原理的情況下，再細細琢磨，加深理解。
/*getter是state的get方法，沒有get頁面就獲取不到數據 獲取頁面: import {mapGetters,mapActions} from 'vuex' <h1>{{count}}</h1> computed:mapGetters([ 'count' ]), store.js: var state = { count:6 }, var getters={ count(state){ return state.count } } 改變數據頁面： <button @click="increment">增加</button> methods:mapActions([ //該 increment 來自 store.js 中導出的 actions 和 mutations 中的 increment 'increment', ]) 先發給action: const actions ={ // ({commit,state}) 這種寫法是 es6 中的對象解構 increment({commit,state}){ //提交一個名為 increment 的變化，名字可自定義，可以認為是類型名，與下方 mutations 中的 increment 對應 //commit 提交變化，修改數據的唯一方式就是顯式的提交 mutations commit('increment') } } 再發給mutations: const mutations ={ //與上方 commit 中的 ‘increment' 相對應 increment(state){ state.count ++; } } */