uniapp 使用全局狀態管理 Vuex

PS：現在的版本Vuex 都內置了，不用下載，直接導入掛載啟動   贏取白富美！

 

1.導入

　　1.1 根目錄新建 store ，store下面新建 index.js

　　

　　1.2 寫入代碼啦啦啦啦

//導入Vue 和 導入Vuex
import Vue from 'vue';
import Vuex from 'vuex';


//安裝Vuex插件
Vue.use(Vuex);

//創建實例
const store = new Vuex.Store({});

//導出
export default store;

 

2.掛載

main.js 導入 和 掛載

 

 

3.使用【測試】

　3.1 回到store中的index.js 我們往里加配置【數據】

 

 

創建store實例的時候 ，構造里面有option參數，里面計入模塊。

　　

　　3.2 創建獨立模塊

回到store文件夾 ，創建一個module文件夾存放模塊，，，然后創建search.js ，相當於創建一個獨立模塊。

 

export default {
    //獨立命名空間
    namespaced:true,
    //通過 state 聲明數據
    state:() => {
        return {
            msg:'hello Vuex'
        }
    }
}

 

然后在 store中的index 注冊這個模塊。【導入和注冊】

 

 3.2 實例使用state的值：

　　我在一個組件上使用剛定義的search模塊里面state的msg的值 “hello vuex” ：

1.在組件導入 mapState ,從 vuex導入，

2.必須在 “計算屬性”下 注冊 state 的數據，導入后的數據可以直接被使用，就想使用data中的一樣：

 

 

然后我直接使用：

 

 

 即：

 

 

---

Vuex 數據的“改”　　　　【其實是Vue的基礎 我換個形式罷了】

改變vuex 中的 值，是不能直接修改的，是通過 mutations 修改：

在獨立模塊加入 mutaitions:

里面寫方法即可：

  第一個參數永遠是 state，其他參數是外面來的，具體代碼自己寫：

 

 

使用 【導入，定義和使用】

　在頁面中導入 mapMutations ，記住是帶s的啊：

 

 然后一定要在 method 中合並進來，合並進來的函數，使用的時候就像你正常使用method中的函數一樣：

合並也是三個點的方法，第一個參數還是名字，第二個參數就是要合並進來的mutations中定義好的名字:

 

 

然后你直接使用即可，有參數的你傳參數唄：

 

 

 

PS：當然你可以不分模塊直接在option寫這些，但是大項目那些是很嚴謹的 

完.