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 相关文章推荐
用Div仿showModalDialog模式菜单的效果的代码
Mar 05 Javascript
JS中的prototype与面向对象的实例讲解
May 22 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
js文件包含的几种方式介绍
Sep 28 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
Angular 4.x中表单Reactive Forms详解
Apr 25 Javascript
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 Javascript
JavaScript实现PC端横向轮播图
Feb 07 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网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
让PHP以ROOT权限执行系统命令的方法
2011/02/10 PHP
php实现自动获取生成文章主题关键词功能的深入分析
2013/06/03 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
PHP扩展CURL的用法详解
2014/06/20 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
WordPress用户登录框密码的隐藏与部分显示技巧
2015/12/31 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
JavaScript中的Function函数
2015/08/27 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
js初始化验证实例详解
2016/11/26 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
mpvue小程序循环动画开启暂停的实现方法
2019/05/15 Javascript
layui点击弹框页面 表单请求的方法
2019/09/21 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
2008/09/06 Python
TensorFlow实现iris数据集线性回归
2018/09/07 Python
python配置文件写入过程详解
2019/10/19 Python
Python socket聊天脚本代码实例
2020/01/02 Python
python实现word文档批量转成自定义格式的excel文档的思路及实例代码
2020/02/21 Python
基于python 取余问题(%)详解
2020/06/03 Python
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
经销商会议欢迎词
2014/01/11 职场文书
初一学生期末评语
2014/04/24 职场文书
优秀求职信
2014/05/29 职场文书
车辆转让协议书
2014/09/24 职场文书
Mysql Online DDL的使用详解
2021/05/20 MySQL
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技