vuex安裝及最基本使用入門(嚴格模式下)

•  安裝vuex

 

  npm install vuex --save

• main.js中引入安裝

   

 import Vuex from 'vuex';
 Vue.use(Vuex);

•  配置vuex（非嚴格模式下可直接操作state數據，只是無法跟蹤數據狀態變化）

   

 //Vuex配置
    const store = new Vuex.Store({
            // state類似vue實例中的data 用來存放數據
            state: {
                    // 可以設置一些需要全局使用的數據
                    username:'zxx'
            },
            // mutations類似vue實例中的methods
            mutations: {
                    // 用來處理數據 比喻數據刪除更新等操作
                    // 第一個參數state是固定寫法 第二個參數表示的是需要修改成的數據
                    update(state,name){
                            state.username = name;
                    }
            }
    })

• 組件中通過this.$store使用

           

console.log(this.$store.state.username);

•  調用mutations方法更新數據

       

    // 第一個參數是 mutations 中定義的對應的方法名 第二個參數是需要更新的數據
    // 具體更新邏輯在update方法中實現
   this.$store.commit('update','lxy');調用update方法更新用戶名

• 組件內監視state中的數據更新

           

 import { mapState } from 'vuex';

// mapState可以將vuex實例state中定義的屬性 映射成爲當前組件中的計算屬性
// 同時可以保證在計算屬性的方法體中可以使用state中的屬性
computed: mapState({
        username: state => state.username
       // username:function(state){return state.username};
})