详解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，不同在于：

1. action 提交的是 mutation，而不是直接变更状态。
2. action 可以包含任意异步操作。
3. 在一个动作中多次改变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'
})

在需要的地方写入值

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.4 action存入值

...mapactions(['selectlist'])

在需要存入的地方使用

this.selectlist({
 list: this.citys,
 index: 1
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。