详解vuex的简单使用
1目录的配置
根据官方推荐在src目录里面创建store目录
2创建store里面的文件
根据官方推荐创建actions.js,getters.js,index.js,mutations.js,mutations-types.js,state.js
2.1state.js
state.js:是vuex的单一状态数，用一个对象就包含了全部的应用层级状态。至此它便作为一个『唯一数据源(SSOT)』而存在。这也意味着，每个应用将仅仅包含一个store实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。（用来管理所有vuex状态数据）
/*
*是vuex的单一状态数，用一个对象就包含了全部的应用层级状态
*单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。（用来管理所有vuex状态数据）
*
*/
conststate={
//城市状态，用来管理城市
city:{},
cityList:[],
fullScreen:true,
palyer:false
};
exportdefaultstate;
2.2mutations-types.js存取mutations相关的字符常量(一些常量)
/* *存取mutations相关的字符常量 * */ //定义常量并导出 exportconstSET_CITY='SET_CITY'; exportconstSET_PLAY='SET_PLAY'; exportconstSET_FULL_SCREEN='SET_FULL_SCREEN'; exportconstSET_CITY_LIST='SET_CITY_LIST';
2.3mutations.js（定义修改的操作）
更改Vuex的store中的状态的唯一方法是提交mutation。Vuex中的mutations非常类似于事件：每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受state作为第一个参数
/*
*更改Vuex的store中的状态的唯一方法是提交mutation
*Vuex中的mutations非常类似于事件：每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受state作为第一个参数
*/
//导入mutation-type.js里面所有的常量
import*astypesfrom'./mutation-types';
//定义一个mutation可以供设置和修改值
constmutations={
/*
*1表达式作为属性表达式放在方括号之内
*2形参state（获取当前状态树的state）
*3形参city，是提交mutation时传的参数
*4使用mutation便于书写方便
*5这个操作相当于往state.js里面写入city
*/
[types.SET_CITY](state,city){
state.city=city;
},
[types.SET_CITY_LIST](state,list){
state.cityList=list;
},
[types.SET_FULL_SCREEN](state,flag){
state.fullScreen=flag;
},
[types.SET_PLAY](state,palyState){
state.palyer=palyState;
}
};
//导出mutation
exportdefaultmutations;
2.4getters.js有时候我们需要从store中的state中派生出一些状态。
mapGetters辅助函数仅仅是将store中的getters映射到局部计算属性
/* *有时候我们需要从store中的state中派生出一些状态 *这里的常量主要是对state里面做一些映射 *mapGetters辅助函数仅仅是将store中的getters映射到局部计算属性 */ //对state里面的属性做一些映射 exportconstcity=state=>state.city;//箭头函数的简写 exportconstcityList=state=>state.cityList; exportconstfullScreen=state=>state.fullScreen; exportconstpalyer=state=>state.palyer;
2.5actions.js
Action类似于mutation，不同在于：
- Action提交的是mutation，而不是直接变更状态。
- Action可以包含任意异步操作。
- 在一个动作中多次改变mutation可以封装一个action
/*
*actions类似mutation
*区别：
*1：action提交的是mutation
*2：action可以包含任意异步操作
*/
/*
*使用：
*1：在一个动作中多次改变mutation可以封装一个action
*/
import*astypesfrom'./mutation-types';
exportconstselectList=function({commit,state},{list,index}){
commit(types.SET_CITY_LIST,list);
commit(types.SET_PLAY,false);
commit(types.SET_FULL_SCREEN,true);
};
2.6index.js入口
/*
*入口
*/
importVuefrom'vue';
importVuexfrom'vuex';
//import*asobjfrom'xxxx';会将xxxx中所有export导出的内容组合成一个对象返回。
import*asactionsfrom'./actions';
//拿到getters里面的映射
import*asgettersfrom'./getter';
importstatefrom'./state';
importmutationsfrom'./mutations';
importcreatedLoggerfrom'vuex/dist/logger';
Vue.use(Vuex);
constdebug=process.env.NODE_ENV!='production';
exportdefaultnewVuex.Store({
actions,
getters,
state,
mutations,
strict:debug,
plugins:debug?[createdLogger()]:[]
});
3使用
3.1在mian.js注册store
在main.js里面new的Vue的实例里面注册store
3.2写入值，要在组件中引入mapMutations的语法糖
引入语法糖
import{mapMutations,mapActions}from'vuex';
在methods里面mapMutations辅助函数将组件中的methods映射为store.commit调用
...mapMutations({
//这里和mutation里面的常量做一个映射
setCity:'SET_CITY'
})
在需要的地方写入值
this.setCity(city);
3.3获取值
获得vuex中的值，要在组件中引入mapGetters（mapGetters辅助函数仅仅是将store中的getters映射到局部计算属性）
引入mapGetters
import{mapGetters}from'vuex';
在computed计算属性里面使用对象展开运算符将getters混入computed对象中
computed:{
//这里面的city映射的是state.js里面的city
//可以映射多个值
...mapGetters([
'city',
'cityList',
'palyer',
'fullScreen'
])
}
拿到值
created(){
console.log(this.city);
console.log(this.cityList[1]);
console.log(this.palyer);
console.log(this.fullScreen);
}
3.4action存入值
...mapActions(['selectList'])
在需要存入的地方使用
this.selectList({
list:this.citys,
index:1
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。