vuex 狀態管理實例


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 官網都有,大家可以去看,如果本人有寫錯的,歡迎指出!!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM