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 相关文章推荐
用js写了一个类似php的print_r输出换行功能
Feb 18 Javascript
jQuery选择器源码解读(三):tokenize方法
Mar 31 Javascript
JavaScript使用Replace进行字符串替换的方法
Apr 14 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 Javascript
JavaScript驾驭网页-CSS与DOM
Mar 24 Javascript
Vue单文件组件基础模板小结
Aug 10 Javascript
JavaScript动态绑定详解
Sep 14 Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
Mar 15 Javascript
vue-dplayer 视频播放器实例代码
Nov 08 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 Javascript
详解如何使用Node.js实现热重载页面
May 06 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/03/21 PHP
基于PHP-FPM进程池探秘
2017/10/17 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
js停止输出代码
2008/07/20 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
浅析jQuery1.8的几个小变化
2013/12/10 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
JavaScript中捕获与冒泡详解及实例
2017/02/03 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
Vue.use源码分析
2017/04/22 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
python人民币小写转大写辅助工具
2018/06/20 Python
django admin组件使用方法详解
2019/07/19 Python
python系列 文件操作的代码
2019/10/06 Python
TensorFlow索引与切片的实现方法
2019/11/20 Python
python opencv如何实现图片绘制
2020/01/19 Python
python将数据插入数据库的代码分享
2020/08/16 Python
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
2014/04/23 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
法学专业应届生求职信
2013/10/16 职场文书
英语专业毕业生求职简历的自我评价
2013/10/24 职场文书
酒后驾驶检讨书
2014/01/27 职场文书
竞聘书格式及范文
2014/03/31 职场文书
项目合作意向书范本
2014/04/01 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
婚宴新娘致辞
2015/07/28 职场文书
python 爬取吉首大学网站成绩单
2021/06/02 Python