vuex詳細介紹和使用方法
- 2019 年 10 月 6 日
- 筆記
1.什麼是vuex？
官方的解釋： Vuex是一個專為Vue.js應用程序開發的狀態管理模式
當項目比較龐大的時候，每個組件的狀態比較多，為了方便管理，需要把組件中的狀態抽取出來，放入Vuex中進行統一管理。常用的登錄，購物車等一下數據的存儲
State：唯一的數據源，我們需要把任何一個組件中需要抽取出來的變量放入到state中去
Getters：通過Getters可以派生出一些新的狀態
Mutations：更改Vuex的store中的狀態的唯一方法時提交mutation
Actions：Action提交的是mutation，而不是直接變更狀態。Action可以包含任何的異步操作, 但mutation必須是同步操作。
操作步驟： 當組件中的狀態發生改變，通過dispatch函數提交到Action，Actions再通過Commit函數提交到Mutations, 此時，狀態發生改變都會實時的去渲染組件。
在線文檔：
項目中如何使用vuex
在我們的項目中，安裝vuex
cnpm install vuex --save
在src目錄中，創建store文件，並創建vuex中模塊的文件名，每一個都單獨拆分開，便於管理模塊。
然後在你的main.js文件引入
在你的index.js相當於vuex的主目錄，文件都在index.js文件引入
state文件定義所有的狀態，
mutation-types用於定義action和mutation變量，便於統一管理，
定義的狀態可以在瀏覽器看到我們定義的變量
action 提交的是 mutation，而不是直接變更狀態。
mutation提交更改state的唯一的狀態
getters派發state的狀態值，通過計算屬性獲取值。在任何一個組件都可以或獲取到你在state存儲的數據信息
在組件中使用。setUser就是在action定義的提交mutation的放，decode要提交的數據
this.$store.dispatch("setUser", decode);
只要寫好一個，其他的套路都是一樣的，主要的就是action提交大mutations，然後mutations去更改state裏面的狀態。
