B VUE系列 三：vuex，vue全局變量管理和狀態更新的利器

vuex是官方提供的管理全局變量的工具，主要是為了組件之間的交流，同時把組件的耦合性降到最低，只要根據官方的格式來寫就可以了

1、安裝

npm install vuex -S

2、配置

然后在 main.js 中引入

import store from './vuex/store'

3,核心倉庫 store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 這里定義初始值
let state = {
  name:"",
  
};

const mutations = {
   setName(context,msg){
     context.custid = msg;
   },
  
};

// 事件觸發后的邏輯操作
// 參數為事件函數
const actions = {

};

// 返回改變后的數值
const getters = {

};

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

4、讀取store中的值

computed: {
      author () {
        return this.$store.state.name
      }
    }

5、改變值，官方推薦方法

this.$store.commit('setName',"Jack");
//setName要和store中mutations 里面的方法名對應

以上就是基本 簡單的用法：

復雜的用法 參考 官網的 購物車案例。對於大項目~~有 區分模塊的概念 等  后續補充！！

 

3333