Detailed explanation of the simple use of vuex

This article mainly introduces the simple use of vuex in detail. Now I will share it with you and give you a reference.

1 Directory configuration

Create the store directory in the src directory according to official recommendations

2 Create files in the store

Create actions.js, getters.js, index.js, mutations.js, mutations-types.js, state.js based on official recommendations

2.1 state.js

state.js: It is a single state number of vuex, which contains all application-level states in one object. So far it exists as a "single source of data (SSOT)". This also means that each application will only contain one store instance. A single state tree allows us to directly locate any specific piece of state and easily obtain a snapshot of the entire current application state during debugging. (Used to manage all vuex status data)

/*
* 是vuex的单一状态数，用一个对象就包含了全部的应用层级状态
* 单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。（用来管理所有vuex状态数据）
*
*/

const state = {

 // 城市状态，用来管理城市
 city: {},
 cityList: [],
 fullScreen: true,
 palyer: false
};

export default state;

2.2 mutations-types.js Access character constants related to mutations (some constants)

/*
* 存取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 (define modified operations)

The only way to change the state in the Vuex store is to submit a mutation. Mutations in Vuex are very similar to events: each mutation has a string event type (type) and a callback function (handler). This callback function is where we actually make state changes, and it will accept state as the first parameter

/*
 * 更改 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 Sometimes we need to derive some state from the state in the store.

mapGetters auxiliary function just maps the getters in the store to local calculated properties

/*
* 有时候我们需要从 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 is similar to mutation, but the difference is:

1. Action submits a mutation rather than directly changing the state.

2. Action can contain any asynchronous operation.

3. Changing mutations multiple times in one action can encapsulate an 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 entry

/*
* 入口
*/

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 Use

3.1 Register the store in main.js

Register the store in the new Vue instance in main.js

3.2 Write the value, To introduce the syntactic sugar of mapMutations into the component

Introduce the syntactic sugar

import {mapMutations, mapActions} from 'vuex';

In methods, the mapMutations auxiliary function maps the methods in the component to store.commit call

...mapMutations({
 // 这里和mutation里面的常量做一个映射
 setCity: 'SET_CITY'
})

In Write the value where needed

this.setCity(city);

3.3 Get the value

To get the value in vuex, you need to introduce mapGetters in the component (the mapGetters auxiliary function just maps the getters in the store to local calculated properties )

Introduce mapGetters

import {mapGetters} from 'vuex';

Use the object spread operator in the computed property to mix the getters into the computed object

computed: {
  // 这里面的city映射的是state.js里面的city
  // 可以映射多个值
  ...mapGetters([
   'city',
   'cityList',
   'palyer',
   'fullScreen'
  ])
 }

Get the value

created() {
  console.log(this.city);
  console.log(this.cityList[1]);
  console.log(this.palyer);
  console.log(this.fullScreen);
 }

3.4 action deposit value

...mapActions(['selectList'])

Use it where it needs to be deposited

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Two ways for Vue single-page application to reference separate style files

Based on the storage key value in js Introduction to and precautions

angular4 Example of shared service data communication in multiple components

The above is the detailed content of Detailed explanation of the simple use of vuex. For more information, please follow other related articles on the PHP Chinese website!