vuex 使用詳解 === ### 一、什么是vuex ``` vuex是一個專門為vue.js設計的集中式狀態管理架構。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。。 ``` ### 二、vuex使用場景 ``` vuex主要是是做數據交互，父子組件傳值可以很容易辦到，但是兄弟組件間傳值（兄弟組件下又有父子組件），或者大型spa單頁面框架項目，頁面多并且一層嵌套一層的傳值，異常麻煩，用vuex來維護共有的狀態或數據會更便捷 ``` 場景說明： - 由于vuex中的state存放的數據在頁面刷新時會丟失，vuex只能用于單個頁面中不同組件（例如兄弟組件）的數據流通 ### 三、Vuex核心概念 - 1、store：類似容器，包含應用的大部分狀態 一個頁面只能有一個容器 狀態存儲是響應式的 不能直接改變store中的狀態，唯一途徑顯示地提交mutations 在actions里面，也不能直接更改state里面的狀態值，必須先定義一個mutations，然后在actions里面commit這個mutations，從而來更改state的狀態值； 如果要再次請求異步，那么就是dispatch一個actions - 2、State：包含所有應用級別狀態的對象 - 3、Getters：在組件內部獲取store中狀態的函數，類似組件的計算屬性computed - 4、Mutations：唯一修改狀態的事件回調函數，默認是同步的，如果要異步就使用Actions - 5、Actions：包含異步操作、提交mutations改變狀態 - 6、Modules：將store分割成不同的模塊 ### 四、引入Vuex 1、安裝vuex ``` npm install vuex --save ``` 2、新建一個store文件夾（這個不是必須的），并在文件夾下新建index.js文件，文件中引入我們的vue和vuex  3、在main.js 中引入新建的store ``` import store from './store/' new Vue({ el: '#app', router, store,//使用store template: '<App/>', components: { App } }) ``` ### 五、頁面使用 ``` 1.讀取store里的值： this.$store.state.字段名 如果有 moudle 的話，假設叫 user ,那么取值又要變了，加上 module 名 this.$store.state.user.字段名 2.發起操作請求: this.$store.dispatch('action中的方法名' , '參數') ; 參數你可以隨便傳json 3.getters的用法 this.$store.getters.filterDoned filterDoned 是在 todo 里寫的一個 getters 方法，就這么調用噢 ```