vuex直接赋值的三种方法总结

2024-10-30 12:11:25

我们在编写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直接赋值的三种方法总结就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

vuex 实现getter值赋值给vue组件里的data示例

通过watch将orderDetailsData对象赋值给data中的consignee对象,这样能将操作能避免v-model修改时,直接改动vuex中的值. <template> <input type="text" placeholder="请输入收货人名字" v-model="consignee.name"> <input type="text" placeholder="请输入收
vue 中自定义指令改变data中的值

通过局部自定义指令实现了一个拖动的指令 html: <div style="position:absolute;width:100px;height:100px;border:1px solid red" v-drag="{set:set}"></div> script: methods:{ set(x,y){ this.data.x=x; this.data.y=y; } }, directives:{ // 拖动的自定义指令 drag(e
解决vue接口数据赋值给data没有反应的问题

问题: 就是我在接口赋值给了data的变量,然后组件的效果没有出来(我的是旋转效果) 代码如下: data() { return { slides: [] } }, mounted() { this.request() }, methods: { request() { this.$http.post('xxxxxxxxxxxx', {}, (res) => { if (is.object(res)) { if (res.status === 'succ') { this.slides = re
Vuex之理解Getters的用法实例

1.什么是getters 在介绍state中我们了解到,在Store仓库里,state就是用来存放数据,若是对数据进行处理输出,比如数据要过滤,一般我们可以写到computed中.但是如果很多组件都使用这个过滤后的数据,比如饼状图组件和曲线图组件,我们是否可以把这个数据抽提出来共享?这就是getters存在的意义.我们可以认为,[getters]是store的计算属性. 2.如何使用定义:我们可以在store中定义getters,第一个参数是state const getters = {sty
vuex直接赋值的三种方法总结

我们在编写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={//
vue项目退出登录清除store数据的三种方法

目录方法一:(不友好,页面会白屏,不推荐使用) 方法二 : (不会出现白屏,推荐使用) 方法三 : vuex清除token (不会出现白屏,推荐使用) 总结方法一:(不友好,页面会白屏,不推荐使用) 在退出登录的loginOut 方法里面: window.location.reload() 方法二 : (不会出现白屏,推荐使用) 利用v-if控制router-view,在根组件APP.vue中实现一个刷新方法 <template> <router-view v-if="is
总结iOS实现渐变颜色的三种方法

在iOS开发过程中有的时候会需要用到渐变的颜色,这篇文章总结了三种方法来实现,有需要的朋友们下面来一起看看吧. 一.CAGradientLayer实现渐变 CAGradientLayer是CALayer的一个特殊子类,用于生成颜色渐变的图层,使用较为方便下面介绍下它的相关属性: colors 渐变的颜色 locations 渐变颜色的分割点 startPoint&endPoint 颜色渐变的方向,范围在(0,0)与(1.0,1.0)之间,如(0,0)(1.0,0)代表水平方向渐变,(0,0)(
JS中动态创建元素的三种方法总结(推荐)

1.动态创建元素一 document.write() 例如向页面中输出一个 li 标签 <pre class="html" name="code"><span style="font-size:12px;"><script> document.write("<li>123</li>"); </script></span> body标签中就会插入
JS实现上传图片的三种方法并实现预览图片功能

在常见的用户注册页面,需要用户在本地选择一张图片作为头像,并同时预览. 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是,直接在本地内存中预览图片,用户确认提交后再上传至服务器保存. 这两种方法各有利弊,方法一很明显,浪费流量和服务器资源:方法二则加重了浏览器的负担,并且对浏览器的兼容性要求更高(在某些低版本中的IE浏览器不支持). 以下是实现上述思路的方法: 1. 模板文件 <!DOCTYPE html> <html l
JavaScript定义数组的三种方法(new Array(),new Array('x','y')

如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co
iOS开发定时器的三种方法分享

前言在开发中,很多时候我们需要用到定时器实时刷新某个数值.这个时候我们就需要用到定时器,这里,我为大家推荐三种方法,分别是:NSTimer.CADisplayLink.GCD.接下来我就一一介绍它们的用法.希望能帮到大家. 一.NSTimer(一般用于定时的更新一些非界面上的数据) 1. 创建方法 NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(action:
PHP实现链式操作的三种方法详解

本文实例讲述了PHP实现链式操作的三种方法.分享给大家供大家参考,具体如下: 在php中有很多字符串函数,例如要先过滤字符串收尾的空格,再求出其长度,一般的写法是: strlen(trim($str)) 如果要实现类似js中的链式操作,比如像下面这样应该怎么写? $str->trim()->strlen() 下面分别用三种方式来实现: 方法一.使用魔法函数__call结合call_user_func来实现思想:首先定义一个字符串类StringHelper,构造函数直接赋值value,然后链式
C语言中对数组赋值的三种形式

前言 C 语言支持数组数据结构,它可以存储一个固定大小的相同类型元素的顺序集合.数组是用来存储一系列数据,但它往往被认为是一系列相同类型的变量. 在C语言中,对数组进行赋值的三种形式方法如下: 1.通过循环的形式即:数组名[下标] 对数组的元素进行依次赋值 #include <stdio.h> int main() { int i; int a[10] = {0}; for(i=0;i<10;i++) { scanf("%d",&a[i]
python捕获警告的三种方法

1. 警告不是异常你是不是经常在使用一些系统库或者第三方模块的时候,会出现一些既不是异常也不是错误的警告信息? 这些警告信息,有时候非常多,对于新手容易造成一些误判,以为是程序出错了. 实则不然,异常和错误,都是程序出现了一些问题,但是警告不同,他的紧急程度非常之低,以致于大多数的警告都是可以直接忽略的. 如果不想显示这些告警信息,可以直接加上参数 -W ignore 参数,就不会再显示了. 2. 警告能捕获吗能捕获的只有错误异常,但是通过一系列的操作后,你可以将这些警告转化为异常. 这样

vuex直接赋值的三种方法总结

相关推荐

随机推荐