DDR爱好者之家

vuex直接赋值的三种方法总结
站长资源 2024/11/26 佚名
47 1538
DDR爱好者之家 Design By 杰米

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

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米