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 相关文章推荐
网上抓的一个特效
May 11 Javascript
在js中单选框和复选框获取值的方式
Nov 06 Javascript
防止文件缓存的js代码
Jan 10 Javascript
jquery拖动插件(jquery.drag)使用介绍
Jun 18 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
node.js中的fs.unlinkSync方法使用说明
Dec 15 Javascript
Bootstrap响应式侧边栏改进版
Sep 17 Javascript
JavaScript中Math对象的方法介绍
Jan 05 Javascript
iscroll实现下拉刷新功能
Jul 18 Javascript
详解在vue-cli中使用路由
Sep 25 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 Javascript
在vue中使用vant TreeSelect分类选择组件操作
Nov 02 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
thinkphp常见路径用法分析
2014/12/02 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
DOM精简教程
2006/10/03 Javascript
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
2013/07/10 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
2015/08/10 Javascript
基于javascript实现彩票随机数生成(简单版)
2020/04/17 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
2018/04/21 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
浅析微信扫码登录原理(小结)
2018/10/29 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
python文件操作整理汇总
2014/10/21 Python
Python实现从百度API获取天气的方法
2015/03/11 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
kafka-python 获取topic lag值方式
2019/12/23 Python
python str字符串转uuid实例
2020/03/03 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
XML文档面试题
2015/08/05 面试题
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
物流管理毕业生自荐信
2013/10/24 职场文书
教师对学生的评语
2014/04/28 职场文书
承诺书范本大全
2015/05/04 职场文书
趣味运动会赞词
2015/07/22 职场文书
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL