vuex的知识点二次解析
1 什么是vuex
- vuex是全局数据与状态集中管理,当数据发送改变时,会触发个组件视图自动更新。
2 vuex的核心概念初步认识
-
vuex的核心概念分为
-
state – 存放状态
-
getters – state的计算属性
-
mutations – 更改状态的逻辑,同步操作
-
actions – 提交mutation,异步操作
-
mudules – 将store模块化
-
-
什么时候需要vuex?
-
当一个数据需要在多个组件中使用时候,用vuex
-
当一个ajax的数据需要在多个组件中使用,需要vuex action
-
当一个方法需要在多个组件中使用的时候,vuex mutation
-
3 对vuex的核心概念进行运用方法
3.1 state
- 此时相对于组件中的data。
- 定义:state:{goods:[]}
- 组件调用:$store.state.goods
- 如果使用映射的方式 :
- import {mapStore} from vuex
computed:{
…mapStore([“goods”])
} - 调用:{ {goods}}
- import {mapStore} from vuex
3.2 getters
- 相对于vue组件的中的 computed
- 定义:getters:{totalPrice(state){}}
- 组件调用:$store.getters.totalPrice
- 如果使用映射的方式 :
- import {mapGetters} from vuex
computed:{
…mapGetters([“totalPrice”])
} - 调用:{ {totalPrice}}
- import {mapGetters} from vuex
3.3 mutations
- 相对于vue组件的中的 methods
- 定义:mutaions:{delCart(store,参数){})}
- 组件调用:$store.commit(‘delCart’,参数)
- 如果使用映射的方式 :
-
import {mapMutations} from vuex
methods:{
…mapMutations([“delCart”])
} -
调用:@click=“delCart(参数)”
-
3.4 Actions
- 相对于vue组件的中的 methods(异步)
- 定义:actions:{getCart(context,参数){
context.commit(“initCart”,data)
}} - 组件调用:$store.commit(‘delCart’,参数)
- 如果使用映射的方式 :
- import {mapAcions} from vuex
methods:{
…mapActions([“getCart”])
} - 调用:@click=“getCart()”
- import {mapAcions} from vuex
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
- 定义:const state={“name”:“馒头”};
- 访问:$store.state.user.name
-
mutatioins
- 定义:const mutations={
changeName(state){
state.name=“jack”
} }; - 访问:$store.commit(‘changeName’)
- 定义:const mutations={
-
actions
-
定义:const actions={
addNum({commit,dispatch,getters,rootGetters,state,rootState}){
rootState.goods[0].num++;
commit(“changeName”);
}}; -
访问:$store.dispatch(“addNum”)
-
-
getters
-
定义:const getters={
nameLen(state){
return state.name.length;
}
}; -
访问:$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
- 默认有命名空间
- 调用:$store.state.user.name
-
mutations
- 默认有命名空间
- 调用:$store.commit(“user/changeName”)
-
actions
- 调用:$store.dispatch(“user/addNum”)
- 定义:addNum({state,rootState,getters,rootGetters,commit,dispatch}){
// 访问模块内的mutation
commit(“changeName”)
// 访问全局的mutations
commit(“addCart”,item,{root:true})
}
-
getters
- 调用:$store.getters[“user/nameLen”]
- 定义 :
nameLen({state,getters, rootState, rootGetters}){
return state.name.length;
}