详解vuex的简单使用

发布时间：2020-12-17 02:31:11 所属栏目：百科来源：网络整理

导读：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的单一状态数，用一个对象就包含了全部的应用层级

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状态数据）

const state = {

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

export default state;

2.2 mutations-types.js 存取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 作为第一个参数

// 导入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 = city;
},types.SET_CITY_LIST {
state.cityList = list;
},types.SET_FULL_SCREEN {
state.fullScreen = flag;
},types.SET_PLAY {
state.palyer = palyState;
}
};

// 导出mutation
export default mutations;

2.4 getters.js 有时候我们需要从 store 中的 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

使用：
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的语法糖

引入语法糖

在methods里面mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用

在需要的地方写入值

3.3获取值

获得vuex中的值，要在组件中引入mapGetters（mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性）

引入mapGetters

在computed计算属性里面使用对象展开运算符将 getters 混入 computed 对象中

拿到值

3.4 action存入值

在需要存入的地方使用

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!