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;
  }

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/73830.html

標籤：其他

上一篇：鴻蒙開發實戰系列之一：圓角

下一篇：SpringBoot寫后端介面，看這一篇就夠了！