vuex直接賦值的三種方法總結(jié)
我們?cè)诰帉?xiě)vuex代碼過(guò)程中，覺(jué)得在a.vue的模板里面寫(xiě)入例如 <p>{{$store.state.num}}</p>很麻煩，我們希望直接就寫(xiě)成{{num}},我們應(yīng)該怎么寫(xiě)，vue給出三種固定寫(xiě)法，大家理解之后基本照抄，稍做改動(dòng)即可
第一種方法 通過(guò)computed的計(jì)算屬性直接賦值
1.store.js(vuex的代碼如下):
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state={//狀態(tài)對(duì)象
num:1,
}
const mutations={//觸發(fā)狀態(tài)
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><!--此處要實(shí)現(xiàn){{num}}的寫(xiě)法,需要通過(guò)計(jì)算屬性進(jìn)行寫(xiě)-->
<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;//這里就是計(jì)算屬性的寫(xiě)法
}
},
store
}
</script>
<style scoped>
</style>
注意：計(jì)算屬性寫(xiě)法一定不要忘了給num()與上面的模板要同名
第二種方法 通過(guò)mapState的對(duì)象來(lái)賦值
這種方法更為簡(jiǎn)單
第一步 a.vue引入mapState
import {mapState} from 'vuex'
第二步將上面的計(jì)算屬性改成下面這種寫(xiě)法即可
computed:mapState({num:state=>state.num}),即可
第三種方法通過(guò)mapState的數(shù)組來(lái)賦值
代碼如下所示:
把上面的計(jì)算屬性直接改成下面這種形式
computed:mapState(["num"])
注：記得加上import {mapState} from 'vuex'
以上這篇vuex直接賦值的三種方法總結(jié)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
ant-design-vue是螞蟻金服 Ant Design 官方唯一推薦的Vue版UI組件庫(kù)，它其實(shí)是Ant Design的Vue實(shí)現(xiàn)，組件的風(fēng)格與Ant Design保持同步，組件的html結(jié)構(gòu)和css樣式也保持一致，很多朋友在使用過(guò)程中遇到很多問(wèn)題，今天小編就給大家分享一篇教程幫助大家快速閉坑，一起看看吧2020-01-01
Vue通過(guò)Blob對(duì)象實(shí)現(xiàn)導(dǎo)出Excel功能示例代碼
這篇文章主要介紹了Vue通過(guò)Blob對(duì)象實(shí)現(xiàn)導(dǎo)出Excel功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-07-07
Vue打包優(yōu)化之生產(chǎn)環(huán)境刪除console日志配置
這篇文章主要為大家介紹了Vue打包優(yōu)化之生產(chǎn)環(huán)境刪除console日志配置詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
vue2.0實(shí)現(xiàn)前端星星評(píng)分功能組件實(shí)例代碼
本文通過(guò)實(shí)例代碼給大家介紹了vue2.0實(shí)現(xiàn)前端星星評(píng)分功能組件，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-02-02
Vue ElementUI this.$confirm async await封
這篇文章主要介紹了Vue ElementUI this.$confirm async await封裝方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
axios如何取消重復(fù)無(wú)用的請(qǐng)求詳解
這篇文章主要給大家介紹了關(guān)于axios如何取消重復(fù)無(wú)用的請(qǐng)求的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用axios具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
vue實(shí)現(xiàn)頁(yè)面渲染時(shí)候執(zhí)行某需求的示例代碼
本文主要介紹了vue實(shí)現(xiàn)頁(yè)面渲染時(shí)候執(zhí)行某需求,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-05-05
當(dāng)我們?cè)赩ue.js項(xiàng)目中引用圖片時(shí)，關(guān)于圖片路徑有以下幾種情形,下面通過(guò)本文給大家分享Vue.js中的圖片引用路徑的方式，感興趣的朋友一起看看吧2017-07-07
這篇文章主要介紹了使用Nuxt.js改造已有項(xiàng)目的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
本篇文章主要介紹了基于 Vue 的樹(shù)形選擇組件的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08