我們先看下官網的描述 https://vuex.vuejs.org/zh/
總結一句話 ”Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式“
里面分狀態自管理應用包含以下幾個部分：
- state，驅動應用的數據源；
- view，以聲明方式將 state 映射到視圖；
- actions，響應在 view 上的用戶輸入導致的狀態變化。
里面基本有哪些方法
-
vue的全局狀態管理器
-
實現組件之間跨層傳遞數據
-
實現數據與視圖響應式更新
-
state //相當於vue中的data，用來存儲數據的,在vue組件中獲取，用$store.state.數據名字 -
geeters //從現有數據獲取到新的數據`，相當於vue組件中的`computed` -
mutations //mutations方法，操作數據，相當於vue組件中的methods -
actions ：-
關於Ajax異步的方法需要放在
actions中，執行異步的方法 -
actions 方法，可以執行異步操作方法，相當於vue組件中的
methods -
在vue組件中使用：
$store.dispatch("方法名字",data); -
使用：方法名字({commit},[參數]) { ajax方法};
- 調用actions中的方法時
$store.dispatch("方法名字");- 方法名字：就是在actions中定義的方法的名字
- 如下圖
-
-
modules ： -
- 模塊
- Vuex允許將store分割成模塊(module)
- 每一個模塊都有vuex中的所有方法，
state，mutations，actions，getters - 使用： 在store文件夾下，創建modules文件夾，在其下在創建對應的vuex模塊：比如：登錄模塊的
login.js- state // state就是存儲數據的
- mutations // 模塊中的mutations也是沒有命名空間的，所以也可以直接使用
- actions // 其中vuex中的{commit}解構vuex中的方法，模塊中的{context},得到上下文中的所有方法
- getters // 在導出的時候添加模塊的命名空間
-
namespaced----命名空間
逼逼這么多直接上個真實項目中這么使用
好現在先開始基本項目中使用的demo
第一先要理解 mapState、mapGetters、mapMutations、mapActions 這些方法的使用 都是vuex 中的
總結一句話就 vuex 中基本方法的語法糖形式使用
官網直達https://vuex.vuejs.org/zh/api/#hasmodule
好開始我們的真實項目中
第一 我在項目當中的src 文件下建的以登錄文件
然后我們在引入 mapMutations
然后在methods 方法中寫
在下一步
我在看回 在src 下建的store 下 login 文件
大致講解下里面定義：
1.state 是存儲傳過來的數據
2.mutations 定義的方法 這么使用要做什么邏輯等等
3. export default 然后在把他們導出去 注意 //namespaced: true 的方式使其成為帶命名空間的模塊。保證在變量名一樣的時候，添加一個父級名拼接。
現在為我們干完了一半了 ，完成這么存儲得到vuex 中 ，
下一篇將這么拿出這么使用。