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 textarea的长度进行验证
May 06 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
Jun 29 Javascript
JS操作CSS随机改变网页背景实现思路
Mar 10 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
js简单实现标签云效果实例
Aug 06 Javascript
学习javascript面向对象 理解javascript原型和原型链
Jan 04 Javascript
聊一聊JS中的prototype
Sep 29 Javascript
Mac下使用charles遇到的问题以及解决办法
Jan 10 Javascript
React之PureComponent的使用作用
Jul 10 Javascript
Vue中computed、methods与watch的区别总结
Apr 10 Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 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中将网址转换为超链接的函数
2011/09/02 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
PHP dirname功能及原理实例解析
2020/10/28 PHP
JS正则中的RegExp对象对象
2012/11/07 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
JavaScript eval() 函数介绍及应用示例
2014/07/29 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
2014/08/18 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
python生成器generator用法实例分析
2015/06/04 Python
Python内建模块struct实例详解
2018/02/02 Python
python+opencv识别图片中的圆形
2020/03/25 Python
python实现寻找最长回文子序列的方法
2018/06/02 Python
python 多个参数不为空校验方法
2019/02/14 Python
对DJango视图(views)和模版(templates)的使用详解
2019/07/17 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
Mac PyCharm中的.gitignore 安装设置教程
2020/04/16 Python
Python如何将函数值赋给变量
2020/04/28 Python
django rest framework使用django-filter用法
2020/07/15 Python
python开发入门——列表生成式
2020/09/03 Python
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
2013/02/04 HTML / CSS
HTML5 本地存储 LocalStorage详解
2016/06/24 HTML / CSS
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
五十岁生日宴会答谢词
2014/01/15 职场文书
护士长2015年终工作总结
2015/04/24 职场文书
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python