1:vuex 核心概念包括
state ==> 作為一個唯一數據源而存在,由於 Vuex 的狀態存儲是響應式的,從 store 實例中讀取狀態最簡單的方法就是在計算屬性中返回某個狀態
getter ==> 通常用在數據的二次處理(過濾數據...)
mutation ==> 更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation(mutation 必須是同步函數)
action ==> Action 提交的是 mutation,而不是直接變更狀態(Action 可以包含任意異步操作)
module ==> Vuex 允許我們將 store 分割成模塊(module)。每個模塊擁有自己的 state、mutation、action、getter
2:現在開始,首先要安裝vuex
npm install vuex --save
3:新建一個子組件en.vue,然后在app.vue里面調用該組件
4:新建一個vuex文件夾,里面新建一個store.js,最后的項目目錄
5:然后store.js里面導入vuex使用,store.js包括以下4個,再導出
6:全局main.js里面導入store.js,並寫在全局app.vue
7:使用 state 。先到store.js里面定義一個數據,比如
8:然后我們就可以在子組件 en.vue 里面通過 computed 獲取到 count 的數據並使用
9:mutations 方法改變 state 數據。store.js里面加個 add 方法累加
10:子組件 methods 里面,通過 commit
11:mutations 傳額外參數
子組件里面
store.js 里面
12:getters 數據處理。 store.js里面
13:子組件 en.vue 通過計算屬性獲取並渲染到頁面
14:actions 配合 commit 提交 mutations store.js 里面。state 定義一個 counts 等於 0
15:en.vue 組件里面通過 computed 獲取到 counts 的數據並使用
methods 里面定義一個函數通過點擊觸發
或者通過輔助函數 mapActions
15:actions 傳額外參數。子組件 methods 里面通過 dispatch
store.js 里面
16:module 就不寫了。vuex 官網都有,大家可以去看,如果本人有寫錯的,歡迎指出!!