<强> 1目录的配置
根据官方推荐在src目录里面创建店目录
<强> 2创建商店里面的文件
根据官方推荐创建行动。js、getters.js指数。js,突变。js, mutations-types。js, state.js
2.1。js
状态。js:是vuex的单一状态数,用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源(SSOT)”而存在。这也意味着,每个应用将仅仅包含一个商店实例。单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。(用来管理所有vuex状态数据)
/*
*是vuex的单一状态数,用一个对象就包含了全部的应用层级状态
*单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。(用来管理所有vuex状态数据)
*
*/const状态={//城市状态,用来管理城市
城市:{},
cityList: [],
全屏:没错,
玩家:假
};
出口默认状态;
mutations-types 2.2。js存取突变相关的字符常量(一些常量)
/*
*存取突变相关的字符常量
*
*///定义常量并导出
出口const SET_CITY=癝ET_CITY”;
出口const SET_PLAY=癝ET_PLAY”;
出口const SET_FULL_SCREEN=癝ET_FULL_SCREEN”;
出口const SET_CITY_LIST=癝ET_CITY_LIST”;
之前
2.3突变。js(定义修改的操作)
更改Vuex的商店中的状态的唯一方法是提交mutation.Vuex中突变的非常类似于事件:每个突变都有一个字符串的事件类型(类型)和一个回调函数(处理器)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受国家作为第一个参数
/*
*更改Vuex的商店中的状态的唯一方法是提交突变
* Vuex中突变的非常类似于事件:每个突变都有一个字符串的事件类型(类型)和一个回调函数(处理器)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受国家作为第一个参数
*///导入mutation-type.js里面所有的常量
*作为类型导入”。/mutation-types ';//定义一个突变可以供设置和修改值
const突变={/*
* 1表达式作为属性表达式放在方括号之内
* 2形参状态(获取当前状态树的状态)
* 3形参的城市,是提交突变时传的参数
* 4使用突变便于书写方便
*这5个操作相当于往state.js里面写入城
*/(类型。SET_CITY](国家、城市){
状态。城市=;
},
(类型。SET_CITY_LIST](状态,列表){
状态。cityList=列表;
},
(类型。SET_FULL_SCREEN](国家,国旗){
状态。全屏=国旗;
},
(类型。SET_PLAY](状态,palyState) {
状态。玩家=palyState;
}
};//导出突变
出口默认突变;
之前
2.4 getter。js有时候我们需要从商店中的状态中派生出一些状态。
mapGetters辅助函数仅仅是将存储中的getter映射到局部计算属性
/*
*有时候我们需要从商店中的状态中派生出一些状态
*这里的常量主要是对国家里面做一些映射
* mapGetters辅助函数仅仅是将存储中的getter映射到局部计算属性
*///对国家里面的属性做一些映射
出口const城市=状态=比;state.city;//箭头函数的简写
出口const cityList=状态=比;state.cityList;
出口const全屏=状态=比;state.fullScreen;
出口const玩家=状态=比;state.palyer;
之前
2.5的行动。js
操作类似于突变,不同在于:
<李>操作提交的是突变,而不是直接变更状态。
<李>操作可以包含任意异步操作。
<李>在一个动作中多次改变突变可以封装一个行动李
/*
*操作类似突变
*区别:
* 1:行动提交的是突变
* 2:行动可以包含任意异步操作
*//*
*使用:
* 1:在一个动作中多次改变突变可以封装一个行动
*/*作为类型导入”。/mutation-types ';
出口const selectList=函数({提交,状态},{列表,指数}){
提交(类型。SET_CITY_LIST列表);
提交(类型。SET_PLAY、假);
提交(类型。SET_FULL_SCREEN,真正的);
