详解vuex的简单使用

详解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_CITYzXsOop_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里面所有的常量

imhttp://port * 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'

})

在需要的地方写入值

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

});

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。