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 相关文章推荐
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
Sep 10 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
Apr 05 Javascript
jtable列中自定义button示例代码
Nov 21 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
Jul 18 Javascript
jQuery插件jPaginate实现无刷新分页
May 04 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
全面介绍vue 全家桶和项目实例
Dec 27 Javascript
layui table 参数设置方法
Aug 14 Javascript
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 Javascript
基于javascript实现日历功能原理及代码实例
May 07 Javascript
小程序实现列表倒计时功能
Jan 29 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
10个实用的PHP正则表达式汇总
2014/10/23 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
看了就知道什么是JSON
2007/12/09 Javascript
javascript 可以拖动的DIV(二)
2009/06/26 Javascript
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
在网页中使用document.write时遭遇的奇怪问题
2010/08/24 Javascript
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
微信小程序动态显示项目倒计时效果
2017/06/13 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
详解vue中axios的封装
2018/07/18 Javascript
详解Vue结合后台的列表增删改案例
2018/08/21 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
2019/01/24 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
小程序分页实践之编写可复用分页组件
2019/07/18 Javascript
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
python实现按行切分文本文件的方法
2016/04/18 Python
spyder常用快捷键(分享)
2017/07/19 Python
python实现中文文本分句的例子
2019/07/15 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
Python的collections模块真的很好用
2021/03/01 Python
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
教师岗位职责
2013/11/17 职场文书
大学英语演讲稿范文
2014/04/24 职场文书
2015年元旦活动总结
2014/05/09 职场文书
仲裁协议书
2014/09/26 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
学习焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
事业单位考察材料范文
2014/12/25 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
2015年行政助理工作总结
2015/04/30 职场文书