1 什么是vuex

• vuex是全域資料與狀態集中管理，當資料發送改變時，會觸發個組件視圖自動更新，

2 vuex的核心概念初步認識

• vuex的核心概念分為

  1. state – 存放狀態

  2. getters – state的計算屬性

  3. mutations – 更改狀態的邏輯，同步操作

  4. actions – 提交mutation，異步操作

  5. mudules – 將store模塊化

• 什么時候需要vuex?

  1. 當一個資料需要在多個組件中使用時候，用vuex

  2. 當一個ajax的資料需要在多個組件中使用，需要vuex action

  3. 當一個方法需要在多個組件中使用的時候，vuex mutation

3 對vuex的核心概念進行運用方法

3.1 state

• 此時相對于組件中的data，
• 定義：state:{goods:[]}
• 組件呼叫：$store.state.goods
• 如果使用映射的方式 ：
  1. import {mapStore} from vuex
     computed:{
     …mapStore([“goods”])
     }
  2. 呼叫：{{goods}}

3.2 getters

• 相對于vue組件的中的 computed
• 定義：getters:{totalPrice(state){}}
• 組件呼叫：$store.getters.totalPrice
• 如果使用映射的方式 ：
  1. import {mapGetters} from vuex
     computed:{
     …mapGetters([“totalPrice”])
     }
  2. 呼叫：{{totalPrice}}

3.3 mutations

• 相對于vue組件的中的 methods
• 定義：mutaions:{delCart(store,引數){})}
• 組件呼叫：$store.commit(‘delCart’,引數)
• 如果使用映射的方式 ：

  1. import {mapMutations} from vuex
     methods:{
     …mapMutations([“delCart”])
     }

  2. 呼叫：@click=“delCart(引數)”

3.4 Actions

• 相對于vue組件的中的 methods(異步)
• 定義：actions:{getCart(context,引數){
  context.commit(“initCart”,data)
  }}
• 組件呼叫：$store.commit(‘delCart’,引數)
• 如果使用映射的方式 ：
  1. import {mapAcions} from vuex
     methods:{
     …mapActions([“getCart”])
     }
  2. 呼叫：@click=“getCart()”

3.5 模塊化

• 就是將store進行進一步細化，將專案不同的功能模塊進行分開寫store，從而方便管理，

3.5.1 創建一個user的模塊（沒有對模塊進行空間命名）

user.js

const state={
	
	"name":"饅頭"
	
	
};
const  mutations={
	
	changeName(state){
		state.name="jack"
	}
	
	
};
const actions={
	
	addNum({commit,dispatch,getters,rootGetters,state,rootState}){
		rootState.goods[0].num++;
		commit("changeName");
	}
	
	
};
const getters={
	nameLen(state){
		return state.name.length;
	}
};
export default {

	state,mutations,actions,getters
}

• 在store最頂部的檔案index.js中的 module中對user的模塊進行匯入注冊
  - import User from ‘./modules/user/user.js’//匯入user模塊
  - module：{
  user：{state，mutations，actions，getters}
  //user
  }

3.5.2 對核心概念的運用

• state

  1. 定義：const state={“name”:“饅頭”};
  2. 訪問：$store.state.user.name

• mutatioins

  1. 定義：const mutations={
     changeName(state){
     state.name=“jack”
     } };
  2. 訪問：$store.commit(‘changeName’)

• actions

  1. 定義：const actions={
     addNum({commit,dispatch,getters,rootGetters,state,rootState}){
     rootState.goods[0].num++;
     commit(“changeName”);
     }};

  2. 訪問：$store.dispatch(“addNum”)

• getters

  1. 定義：const getters={
     nameLen(state){
     return state.name.length;
     }
     };

  2. 訪問：$store.getters.nameLen

• user.js代碼

const state={
	
	"name":"饅頭"
	
	
};
const  mutations={
	
	changeName(state){
		state.name="jack"
	}
	
	
};
const actions={
	
	addNum({commit,dispatch,getters,rootGetters,state,rootState}){
		rootState.goods[0].num++;
		commit("changeName");
	}
	
	
};
const getters={
	nameLen(state){
		return state.name.length;
	}
};
export default {
	state,mutations,actions,getters
}

3.5.3 命名空間模塊

• 如何進行命名空間
  export default {
  state,mutations,actions,getters,namespaced: true
  }

• state

  1. 默認有命名空間
  2. 呼叫：$store.state.user.name

• mutations

  1. 默認有命名空間
  2. 呼叫：$store.commit(“user/changeName”)

• actions

  1. 呼叫：$store.dispatch(“user/addNum”)
  2. 定義：addNum({state,rootState,getters,rootGetters,commit,dispatch}){
     // 訪問模塊內的mutation
     commit(“changeName”)
     // 訪問全域的mutations
     commit(“addCart”,item,{root:true})
     }

• getters

  1. 呼叫：$store.getters[“user/nameLen”]
  2. 定義 ：
     nameLen({state,getters, rootState, rootGetters}){
     return state.name.length;
     }