我們在編寫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直接賦值的三種方法總結就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。