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 Web Slider 焦点图示例源码
Oct 10 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
Sep 21 Javascript
jquery 多个radio的click事件实例
Dec 03 Javascript
用jquery的attr方法实现图片切换效果
Feb 05 Javascript
详解js的视频和音频采集
Aug 09 Javascript
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
Jul 18 Javascript
vue实现图片懒加载的方法分析
Feb 05 Javascript
JavaScript实现点击切换验证码及校验
Jan 10 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
香妃
2021/03/03 冲泡冲煮
PHP编码规范的深入探讨
2013/06/06 PHP
PHP实现获取某个月份周次信息的方法
2015/08/11 PHP
PHP isset()与empty()的使用区别详解
2017/02/10 PHP
JavaScript CSS菜单功能 改进版
2008/12/20 Javascript
JavaScript高级程序设计 扩展--关于动态原型
2010/11/09 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
Bootstrap每天必学之按钮
2015/11/26 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
JavaScript实现图片懒加载(Lazyload)
2016/11/28 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
JavaScript实现获取select下拉框中第一个值的方法
2018/02/06 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
2019/04/08 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
jQuery实现简单三级联动效果
2020/09/05 jQuery
javascript实现简易计算器功能
2020/09/23 Javascript
详解python基础之while循环及if判断
2017/08/24 Python
解决出现Incorrect integer value: '' for column 'id' at row 1的问题
2017/10/29 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
python科学计算之narray对象用法
2019/11/25 Python
python 中的paramiko模块简介及安装过程
2020/02/29 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
销售简历自我评价
2014/01/24 职场文书
英语一分钟演讲稿
2014/04/29 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
导游词之西安骊山
2019/12/03 职场文书
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android
我去timi了,一起去timi是什么意思?
2022/04/13 杂记