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中Date日期函数中的参数使用介绍
Jan 02 Javascript
DIV始终居中的js代码
Feb 17 Javascript
jquery动画效果学习笔记(8种效果)
Nov 13 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
javascript中递归的两种写法
Jan 17 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
Element Input输入框的使用方法
Jul 26 Javascript
js实现鼠标滑动到某个div禁止滚动
Sep 17 Javascript
Vue的过滤器你真了解吗
Feb 24 Vue.js
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新手谈谈我的学习心得
2007/02/25 PHP
PHP 全角转半角实现代码
2010/05/16 PHP
mysql下创建字段并设置主键的php代码
2010/05/16 PHP
并发下常见的加锁及锁的PHP具体实现代码
2010/10/12 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
jquery 模拟雅虎首页的点击对话框效果
2010/04/11 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
JS的千分位算法实现思路
2013/07/31 Javascript
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
js实现的复制兼容chrome和IE
2014/04/03 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
浅谈Nodejs应用主文件index.js
2016/08/28 NodeJs
AngularJS通过$location获取及改变当前页面的URL
2016/09/23 Javascript
总结Javascript中数组各种去重的方法
2016/10/04 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
2016/11/16 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
利用vue开发一个所谓的数独方法实例
2017/12/21 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
详解vue组件中使用路由方法
2019/02/12 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
微信小程序实现加入购物车滑动轨迹
2020/11/18 Javascript
vue实现广告栏上下滚动效果
2020/11/26 Vue.js
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
Django URL传递参数的方法总结
2016/08/28 Python
在python 中实现运行多条shell命令
2019/01/07 Python
200行python代码实现2048游戏
2019/07/17 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
聊聊python中的循环遍历
2020/09/07 Python
护士求职推荐信范文
2013/11/23 职场文书
毕业生的自我评价范文
2013/12/31 职场文书
石油大学毕业生自荐信
2014/01/28 职场文书
大班开学家长寄语
2014/04/04 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
债务纠纷委托书范本
2014/10/14 职场文书