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 相关文章推荐
关于JavaScript的一些看法
May 27 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 Javascript
Jquery submit()无法提交问题
Apr 21 Javascript
超精准的javascript验证身份证号的具体实现方法
Nov 18 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
Oct 28 Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 Javascript
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
AngularJS实现controller控制器间共享数据的方法示例
Oct 30 Javascript
websocket4.0+typescript 实现热更新的方法
Aug 14 Javascript
Echarts实现单条折线可拖拽效果
Dec 19 Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 Javascript
vue实现广告栏上下滚动效果
Nov 26 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 foreach正序倒序输出示例代码
2014/07/01 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
Laravel框架源码解析之模型Model原理与用法解析
2020/05/14 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
iScroll中事件点击触发两次解决方案
2015/03/11 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
JS中IP地址与整数相互转换的实现代码
2017/04/10 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
使用JS获取SessionStorage的值
2018/01/12 Javascript
vue组件从开发到发布的实现步骤
2018/11/11 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
python实现sublime3的less编译插件示例
2014/04/27 Python
实例讲解python中的协程
2018/10/08 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
python连接PostgreSQL过程解析
2020/02/09 Python
python中_del_还原数据的方法
2020/12/09 Python
CSS的pointer-events属性详细介绍(作用和注意事项)
2014/04/23 HTML / CSS
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
简述安装Slackware Linux系统的过程
2012/01/12 面试题
如何写出好的Java代码
2014/04/25 面试题
小学班主任评语大全
2014/04/23 职场文书
活动总结报告怎么写
2014/07/03 职场文书
婚礼领导致辞大全
2015/07/28 职场文书
2016年优秀少先队辅导员事迹材料
2016/02/26 职场文书
Redis 哨兵集群的实现
2021/06/18 Redis
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers