vuex直接賦值的三種方法總結

來源：懂視網責編：小采時間：2020-11-27 22:07:39

vuex直接賦值的三種方法總結

vuex直接賦值的三種方法總結:我們在編寫vuex代碼過程中，覺得在a.vue的模板里面寫入例如 {{$store.state.num}}很麻煩，我們希望直接就寫成{{num}},我們應該怎么寫，vue給出三種固定寫法，大家理解之后基本照抄，稍做改動即可第一種方法通過computed的計算

推薦度：

點擊下載本文 文檔為doc格式

導讀vuex直接賦值的三種方法總結:我們在編寫vuex代碼過程中，覺得在a.vue的模板里面寫入例如 {{$store.state.num}}很麻煩，我們希望直接就寫成{{num}},我們應該怎么寫，vue給出三種固定寫法，大家理解之后基本照抄，稍做改動即可第一種方法通過computed的計算

我們在編寫vuex代碼過程中，覺得在a.vue的模板里面寫入例如 {{$store.state.num}}很麻煩，我們希望直接就寫成{{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