vuex存取值和映射函数使用说明


Posted in Javascript onJuly 24, 2020

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

前言

vuex的执行流程

组件通过dispatch调用action,action通过commit来触发mutation,mutation来负责修改state,state修改后去重新渲染受影响的dom。

安装和引入

1、安装

npm install vuex -S

2、引入

新建:store/index.js。

import vue from 'vue';
import Vuex from 'vuex';

vue.use(Vuex);

export default new Vuex.Store({
 strict:true,//严格模式,防止直接修改state(性能很差,发布时改为false)
 state:{
 a:1,
 b:2
 },
 mutations:{
 addA(state,val){
  state.a+=val;
 },
 addB(state,val){
  state.b+=val;
 }
 },
 actions:{
 addA({commit},val){
  //调用mutations中的addA()
  commit('addA', val);
 },
 addB({commit},val){
  //调用mutations中的addB()
  commit('addB', val);
 }
 },
 //相当于computed
 getters:{
 getA(state){
  return state.a;
 },
 getB(state){
  return state.b;
 },
 count(state){
  return state.a + state.b;
 }
 },
 modules:{

 }
});

3、挂载

import store from './store';

new Vue({
 el: '#app',
 store,
 components: { App },
 template: '<App/>'
})

使用

映射关系

mapState > computed

mapGetters > computed

mapMutations > methods

mapActions > methods

State和mapState

state是vuex的核心,是统一存放数据的地方。

从store中获取值。(不推荐)

<template>
 <div>
  a:{{$store.state.a}}
  <br>
  b:{{$store.state.b}}
 </div>
</template>

官方推荐通过computed来获取,但是如果需要获取多个值就会很麻烦。

mapState

<template>
 <div>
  a:{{a}}
  <br>
  b:{{b}}
 </div>
</template>

<script>
 import {mapState} from 'vuex';
 export default {
  name: "MapState",
  computed:{
   //将store.state中的属性映射到computed
   ...mapState(['a','b'])
  }
 }
</script>

getters和mapGetters

获取getters中的值。

<div>
 a:{{$store.getters.getA}}
 <br>
 b:{{$store.getters.getB}}
 <br>
 a+b={{$store.getters.count}}
</div>

使用mapGetters映射。

<template>
 <div>
  a={{getA}}
  <br>
  b={{getB}}
  <br>
  a+b={{count}}
 </div>
</template>

<script>
 import {mapGetters} from 'vuex';
 export default {
  name: "MapGetters",
  computed:{
   //将store.getters映射到computed
   ...mapGetters(['getA','getB','count'])
  }
 }
</script>

mutations和mapMutations

通过$store.commit来触发mutation。

不推荐直接调用mutation来修改。

<template>
 <div>
  a={{$store.state.a}}
  <br>
  b={{$store.state.b}}
  <br>
  a+b={{$store.getters.count}}
  <hr>
  <button @click="$store.commit('add',5)">a+5</button>
 </div>
</template>

使用mapMutations映射。

<template>
 <div>
  a={{$store.state.a}}
  <br>
  b={{$store.state.b}}
  <br>
  a+b={{$store.getters.count}}
  <hr>
  <button @click="addA(5)">a+5</button>
 </div>
</template>

<script>
 import {mapMutations} from 'vuex';
 export default {
  name: "MapMutations",
  methods:{
   //将store.mutations映射到methods
   ...mapMutations(['addA'])
  }
 }
</script>

actions和mapActions

官方推荐通过action去触发mutation,虽然比较麻烦。

action支持异步,mutation只能同步。

通过$store.dispatch来触发action。

<button @click="$store.dispatch('addA',5)">a+5</button>

使用mapActions映射。

<template>
 <div>
  a={{$store.state.a}}
  <br>
  b={{$store.state.b}}
  <br>
  a+b={{$store.getters.count}}
  <hr>
  <button @click="$store.dispatch('addA',5)">a+5</button>
 </div>
</template>

<script>
 import {mapActions} from 'vuex';
 export default {
  name: "MapActions",
  methods:{
   //将store.actions映射到methods
   ...mapMutations(['addA'])
  }
 }
</script>

Modules

当系统比较庞大时,store会变得非常臃肿。

为了方便store的模块化管理,Vuex 允许我们将 store 分割成 modules。

每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。

补充知识:向vuex存储数据和获取数据-和直接调用actions.js中的异步方法

向vuex的变量存储数据

1.在state.js中添加 userInfo: {},

2.actions.js中添加同步用户信息-将参数userInfo传递给USER_INFO

创建一个方法-不用异步方法

syncUserInfo({commit}, userInfo){
  commit(USER_INFO, {userInfo});
},

3.创建一个中间变量mutation-types.js

export const USER_INFO = 'user_info';

4.在actions.js中引入变量-USER_INFO

import {
  USER_INFO
 } from './mutation-types'

5.在mutations.js中引入变量

import {
  USER_INFO
 } from './mutation-types'

将userInfo赋值给state

[USER_INFO](state, {userInfo}) {
 state.userInfo = userInfo;
 },

6.外界直接调用actions.js中的方法 syncUserInfo

import {mapActions} from 'vuex'
 methods: {
  // 存到vuex-是个方法。需要...延展符展开
  ...mapActions(['syncUserInfo']),
 }

向vuex中获取数据

1.引入 import {mapState} from 'vuex';

2.计算属性

computed:{
 ...mapState(['userInfo'])
},

直接调用vuex-中 actions.js的异步方法--

this.$store.dispatch

created(){
  // 调用vuex-actions中的方法-刚进入app,就需要验证登录的时效性
  this.$store.dispatch('getUserInfo')
},

actions.js

// 7. 异步获取用户信息
async getUserInfo({commit}){
 const result = await getUserInfo(); // actions中调用getUserInfo方法---需要引入import
 console.log(result);
 if(result.success_code === 200){
   commit(USER_INFO, {userInfo: result.message});
 }
},

actions中调用getUserInfo方法---需要引入

import {
 getUserInfo,
} from '../api'
----------------------
api-index.js
// 2.9 获取登录的用户信息
export const getUserInfo = () => ajax(BASE_URL + '/api/user_info');

以上这篇vuex存取值和映射函数使用说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 正则替换 replace(regExp, function)用法
May 22 Javascript
学习js在线html(富文本,所见即所得)编辑器
Dec 18 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
Apr 21 Javascript
动态加载jQuery的方法
Jun 16 Javascript
简介AngularJS的HTML DOM支持情况
Jun 17 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
Javascript中判断一个值是否为undefined的方法详解
Sep 28 Javascript
JavaScript类的继承操作实例总结
Dec 20 Javascript
JS中==、===你分清楚了吗
Mar 04 Javascript
JavaScript实现简单计算器
Mar 19 Javascript
js实现金山打字通小游戏
Jul 24 #Javascript
vuex中store存储store.commit和store.dispatch的用法
Jul 24 #Javascript
js实现滑动滑块验证登录
Jul 24 #Javascript
解决VUEX的mapState/...mapState等取值问题
Jul 24 #Javascript
对vuex中store和$store的区别说明
Jul 24 #Javascript
小程序实现简单语音聊天的示例代码
Jul 24 #Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 #Javascript
You might like
php写的简易聊天室代码
2011/06/04 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装(win+linux)
2012/05/05 PHP
php变量范围介绍
2012/10/15 PHP
Yii PHP Framework实用入门教程(详细介绍)
2013/06/18 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
2019/09/09 PHP
腾讯的ip接口 方便获取当前用户的ip地理位置
2010/11/25 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
同一个网页中实现多个JavaScript特效的方法
2015/02/02 Javascript
JavaScript中获取时间的函数集
2016/08/16 Javascript
用Vue.extend构建消息提示组件的方法实例
2017/08/08 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
基于vue中css预加载使用sass的配置方式详解
2018/03/13 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
python学习笔记:字典的使用示例详解
2014/06/13 Python
简单谈谈python中的Queue与多进程
2016/08/25 Python
Python subprocess模块详细解读
2018/01/29 Python
Python 12306抢火车票脚本
2018/02/07 Python
Python3中bytes类型转换为str类型
2018/09/27 Python
如何基于python操作excel并获取内容
2019/12/24 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
Linux常见面试题
2013/03/18 面试题
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
大学生饮食连锁店创业计划书
2014/01/17 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书
《我的伯父鲁迅先生》教学反思
2016/02/16 职场文书
Python打包为exe详细教程
2021/05/18 Python