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 相关文章推荐
TFDN图片播放器 不错自动播放
Oct 03 Javascript
Javascript Tab 导航插件 (23个)
Jun 11 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
Aug 25 Javascript
JS中DOM元素的attribute与property属性示例详解
Sep 04 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
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
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
php防止恶意刷新与刷票的方法
2014/11/21 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
简单谈谈PHP中的Reload操作
2016/12/12 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
Js四则运算函数代码
2012/07/21 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
2012/11/08 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
浅谈nodejs中的类定义和继承的套路
2017/07/26 NodeJs
Vue 实现双向绑定的四种方法
2018/03/16 Javascript
详解如何webpack使用DllPlugin
2018/09/30 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
[58:32]EG vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
Python操作Excel之xlsx文件
2017/03/24 Python
python基础练习之几个简单的游戏
2017/11/10 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
关于python列表增加元素的三种操作方法
2018/08/22 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
docker django无法访问redis容器的解决方法
2019/08/21 Python
pytorch获取模型某一层参数名及参数值方式
2019/12/30 Python
css3 media 响应式布局的简单实例
2016/08/03 HTML / CSS
LookFantastic丹麦:英国美容护肤精品在线商城
2016/08/18 全球购物
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
经济类毕业生求职信
2014/06/26 职场文书
机关驾驶员违规检讨书
2014/09/13 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
奠基仪式致辞
2015/07/30 职场文书
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL
win7配置本地ftp服务器的图文教程
2022/08/05 Servers