付出宝小程序怎么做_详解vuex的简略使用

摘要: 本文关键详细介绍了详细说明vuex的简易应用,网编感觉挺好的,如今共享给大伙儿,也给大伙儿做下参照。一起追随网编回来看一下吧依据官方网强烈推荐建立 actions.js, getters.js,index.j...

这篇文章主要介绍了详解vuex的简单使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

根据官方推荐创建 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
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 mit 调用

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

在需要的地方写入值

this.setCity(city);

3.3获取值

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

引入mapGetters

import {mapGetters} from 'vuex';

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

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

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




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:网页设计模板图片