详解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 相关文章推荐
关于jQuery中的each方法(jQuery到底干了什么)
Mar 05 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
Sep 14 Javascript
JavaScript:Date类型全面解析
May 19 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
Mar 14 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
Dec 29 Javascript
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
Mar 07 Javascript
微信小程序 简易计算器实现代码实例
Sep 02 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 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
php生成随机密码的几种方法
2011/01/17 PHP
php多层数组与对象的转换实例代码
2013/08/05 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
PHP环境中Memcache的安装和使用
2015/11/05 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
javascript 解析url的search方法
2010/02/09 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
JavaScript 闭包机制详解及实例代码
2016/10/10 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
2017/11/16 Javascript
Vue引入sass并配置全局变量的方法
2018/06/27 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
Node.js实现批量下载图片简单操作示例
2020/01/18 Javascript
[56:00]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第二场
2018/04/10 DOTA
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
python 文件操作删除某行的实例
2017/09/04 Python
python逆向入门教程
2018/01/15 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
python实现图片识别汽车功能
2018/11/30 Python
Python tornado上传文件的功能
2020/03/26 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
土木工程应届生求职信
2013/10/31 职场文书
电子商务毕业生求职信
2013/11/10 职场文书
开学寄语大全
2014/04/08 职场文书
司法所长先进事迹
2014/06/02 职场文书
历史学专业求职信
2014/06/19 职场文书
运动会标语
2014/06/21 职场文书
违纪开除通知书
2015/04/25 职场文书
JavaScript 对象创建的3种方法
2021/11/17 Javascript