这篇文章主要介绍了详解vuex的简单使用,现在分享给大家，也给大家做个参考。
1 目录的配置
根据官方推荐在src目录里面创建store目录
2 创建store里面的文件
根据官方推荐创建 actions.js, getters.js,index.js, mutations.js, mutations-types.js, state.js
2.1 state.js
state.js: 是vuex的单一状态数，用一个对象就包含了全部的应用层级状态。至此它便作为一个『唯一数据源(SSOT)』而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。（用来管理所有vuex状态数据）
/*
* 是vuex的单一状态数，用一个对象就包含了全部的应用层级状态
* 单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。（用来管理所有vuex状态数据）
*
*/
const state = {
// 城市状态，用来管理城市
city: {},
cityList: [],
fullScreen: true,
palyer: false
};
export default state;登录后复制
2.2 mutations-types.js 存取mutations相关的字符常量 (一些常量)
/*
* 存取mutations相关的字符常量
*
*/
// 定义常量并导出
export const SET_CITY = 'SET_CITY';
export const SET_PLAY = 'SET_PLAY';
export const SET_FULL_SCREEN = 'SET_FULL_SCREEN';
export const SET_CITY_LIST = 'SET_CITY_LIST';
登录后复制
2.3 mutations.js （定义修改的操作）
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutations 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数
/*
* 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
* Vuex 中的 mutations 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数
*/
// 导入mutation-type.js里面所有的常量
import * as types from './mutation-types';
// 定义一个mutation可以供设置和修改值
const mutations = {
/*
* 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
export default mutations;登录后复制
2.4 getters.js 有时候我们需要从 store 中的 state 中派生出一些状态。
mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性
/*
* 有时候我们需要从 store 中的 state 中派生出一些状态
* 这里的常量主要是对state里面做一些映射
* mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性
*/
// 对state里面的属性做一些映射
export const city = state => state.city; // 箭头函数的简写
export const cityList = state => state.cityList;
export const fullScreen = state => state.fullScreen;
export const palyer = state => state.palyer;
登录后复制
2.5 actions.js
Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
在一个动作中多次改变mutation可以封装一个action
/*
* actions类似mutation
* 区别：
* 1：action提交的是mutation
* 2：action可以包含任意异步操作
*/
/*
* 使用：
* 1：在一个动作中多次改变mutation可以封装一个action
*/
import * as types from './mutation-types';
export const selectList = function ({commit, state}, {list, index}) {
commit(types.SET_CITY_LIST, list);
commit(types.SET_PLAY, false);
commit(types.SET_FULL_SCREEN, true);
};登录后复制
2.6 index.js入口
/*
* 入口
*/
import Vue from 'vue';
import Vuex from 'vuex';
// import * as obj from 'xxxx'; 会将xxxx中所有export导出的内容组合成一个对象返回。
import * as actions from './actions';
// 拿到getters里面的映射
import * as getters from './getter';
import state from './state';
import mutations from './mutations';
import createdLogger from 'vuex/dist/logger';
Vue.use(Vuex);
const debug = process.env.NODE_ENV != 'production';
export default new Vuex.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'
})登录后复制
在需要的地方写入值
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.4 action存入值
...mapActions(['selectList'])
登录后复制
在需要存入的地方使用
this.selectList({
list: this.citys,
index: 1
});登录后复制
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
Vue单页应用引用单独的样式文件的两种方式
基于js中的存储键值对以及注意事项介绍
angular4 共享服务在多个组件中数据通信的示例
以上是详解vuex的简单使用的详细内容。更多信息请关注PHP中文网其他相关文章！
