vuex直接赋值的三种方法总结


Posted in Javascript onSeptember 16, 2018

我们在编写vuex代码过程中,觉得在a.vue的模板里面写入例如 <p>{{$store.state.num}}</p>很麻烦,我们希望直接就写成{{num}},我们应该怎么写,vue给出三种固定写法,大家理解之后基本照抄,稍做改动即可

第一种方法 通过computed的计算属性直接赋值

1.store.js(vuex的代码如下):

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state={//状态对象
num:1,
}
const mutations={//触发状态
jia(state){
  state.num++;
 },//做加法
jian(state){
  state.num--;
 },//做减法
 
}
export default new Vuex.Store({
state,
mutations,
})

2.你自己组件a.vue代码如下:

<template>
 
 <div>
  <h2>{{msg}}</h2>
  <hr/>
  <h3>{{$store.state.num}}-{{num}}</h3><!--此处要实现{{num}}的写法,需要通过计算属性进行写-->
  
<div>
 <button @click="$store.commit('jia')">+</button>
 <button @click="$store.commit('jian')">-</button>
 
</div>
 </div>
</template>
<script>
 import store from '@/store'
 export default{
  data(){
   return{
    msg:'Hello Vuex',
    
   }
  },
  computed:{
  num(){
  return this.$store.state.num;//这里就是计算属性的写法
  }
  },
  store
  
 }
</script>
<style scoped>
</style>

注意:计算属性写法一定不要忘了给num()与上面的模板要同名

第二种方法 通过mapState的对象来赋值

这种方法更为简单

第一步 a.vue引入mapState

import {mapState} from 'vuex'

第二步将上面的计算属性改成下面这种写法即可

computed:mapState({num:state=>state.num}),即可

第三种方法通过mapState的数组来赋值

代码如下所示:

把上面的计算属性直接改成下面这种形式

computed:mapState(["num"])

注:记得加上import {mapState} from 'vuex'

以上这篇vuex直接赋值的三种方法总结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Array.prototype.slice 使用扩展
Jun 09 Javascript
改写一个简单的菜单 弹性大小
Dec 02 Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
Mar 13 Javascript
详解Vue自定义过滤器的实现
Jan 10 Javascript
d3.js实现立体柱图的方法详解
Apr 28 Javascript
详解Angular2 关于*ngFor 嵌套循环
May 22 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
Sep 14 Javascript
微信小程序左滑动显示菜单功能的实现
Jun 14 Javascript
Webpack的dll功能使用
Jun 28 Javascript
ES6 Set结构的应用实例分析
Jun 26 Javascript
JS实现页面炫酷的时钟特效示例
Aug 14 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 #Javascript
vue2过滤器模糊查询方法
Sep 16 #Javascript
vue里面使用mui的弹出日期选择插件实例
Sep 16 #Javascript
vue 界面刷新数据被清除 localStorage的使用详解
Sep 16 #Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
Sep 16 #Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 #Javascript
分享5个顶级的JavaScript Ajax组件库
Sep 16 #Javascript
You might like
php数组添加元素方法小结
2014/12/20 PHP
php微信公众号开发(4)php实现自定义关键字回复
2016/12/15 PHP
PHP正则表达式匹配替换与分割功能实例浅析
2017/02/04 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
Jquery 绑定时间实现代码
2011/05/03 Javascript
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
浅析return false的正确使用
2013/11/04 Javascript
javascript 原型链维护和继承详解
2014/11/26 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
js将json格式的对象拼接成复杂的url参数方法
2016/05/25 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
Vue组件选项props实例详解
2017/08/18 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
js中对象与对象创建方法的各种方法
2019/02/27 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
[02:33]2018 DOTA2亚洲邀请赛回顾视频 再次拾起那些美妙的时刻
2018/04/10 DOTA
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
python聊天程序实例代码分享
2013/11/18 Python
Python打包文件夹的方法小结(zip,tar,tar.gz等)
2016/09/18 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
python生成式的send()方法(详解)
2017/05/08 Python
Python爬虫天气预报实例详解(小白入门)
2018/01/24 Python
对pandas数据判断是否为NaN值的方法详解
2018/11/06 Python
python实现简单日期工具类
2019/04/24 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
html5 datalist标签使用示例(自动完成组件)
2014/05/04 HTML / CSS
俄罗斯设计师家具购物网站:The Furnish
2019/12/01 全球购物
幼儿园教师工作制度
2014/01/22 职场文书
生产车间标语
2014/06/11 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
redis 存储对象的方法对比分析
2021/08/02 Redis