vuex的知识点二次解析

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