详解vuex的简单使用


Posted in Javascript onMarch 12, 2018

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
});

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

Javascript 相关文章推荐
JavaScript的类型转换(字符转数字 数字转字符)
Aug 30 Javascript
Javascript获取当前时间函数和时间操作小结
Oct 01 Javascript
jQuery中slideUp 和 slideDown 的点击事件
Feb 26 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
初步使用Node连接Mysql数据库
Mar 03 Javascript
解决Angular.Js与Django标签冲突的方案
Dec 20 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
Aug 20 Javascript
微信小程序登陆注册功能的实现代码
Dec 10 Javascript
封装一下vue中的axios示例代码详解
Feb 16 Javascript
js提取中文拼音首字母的封装工具类
Mar 12 #Javascript
基于express中路由规则及获取请求参数的方法
Mar 12 #Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 #Javascript
javascript变量提升和闭包理解
Mar 12 #Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
Mar 12 #Javascript
Vue 仿QQ左滑删除组件功能
Mar 12 #Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 #Javascript
You might like
Protoss兵种介绍
2020/03/14 星际争霸
PHP编码规范-php coding standard
2007/03/16 PHP
AJAX的跨域访问-两种有效的解决方法介绍
2013/06/22 PHP
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
php返回json数据函数实例
2014/10/09 PHP
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
2010/11/20 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
js 链式延迟执行DOME
2012/01/04 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
jQuery手动点击实现图片轮播特效
2020/04/20 Javascript
Javascript操作表单实例讲解(下)
2016/06/20 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
angular.extend方法的具体使用
2017/09/14 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
基于layui的table插件进行复选框联动功能的实现方法
2019/09/19 Javascript
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
[35:55]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.11
2020/12/13 DOTA
python创建一个最简单http webserver服务器的方法
2015/05/08 Python
python发送邮件功能实现代码
2016/07/15 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
使用Python制作一个打字训练小工具
2019/10/01 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
Oracle快照(snapshot)
2015/03/13 面试题
酒吧副总经理岗位职责
2013/12/10 职场文书
《曹刿论战》教学反思
2014/03/02 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
罗马假日观后感
2015/06/08 职场文书
回门宴新娘答谢词
2015/09/29 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers