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嵌套表格及表格內(nèi)部編輯的用法說(shuō)明
這篇文章主要介紹了ant design vue嵌套表格及表格內(nèi)部編輯的用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
Vue實(shí)現(xiàn)懸浮框自由移動(dòng)+錄音功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用Vue實(shí)現(xiàn)懸浮框自由移動(dòng)+錄音功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以動(dòng)手嘗試一下2022-07-07
在Vue.js應(yīng)用開(kāi)發(fā)中,Vue Router 提供了許多特性來(lái)簡(jiǎn)化前端路由管理和用戶(hù)體驗(yàn),其中一個(gè)重要的特性便是路由重定向和別名,它們可以幫助我們更好地管理和組織路由,本文將詳細(xì)介紹如何在Vue Router中使用路由重定向和別名,需要的朋友可以參考下2024-09-09
這篇文章主要為大家詳細(xì)介紹了如何利用vue實(shí)現(xiàn)拍照或錄像的功能,文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
使用vuex的state狀態(tài)對(duì)象的5種方式
本文給大家介紹了使用vuex的state狀態(tài)對(duì)象的5種方式，給大家貼出了我的vuex的結(jié)構(gòu)，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-04-04
在antd Form表單中select設(shè)置初始值操作
這篇文章主要介紹了在antd Form表單中select設(shè)置初始值操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
淺談Vue中的this.$store.state.xx.xx
這篇文章主要介紹了Vue中的this.$store.state.xx.xx用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-09-09
Vue3+Element Plus實(shí)現(xiàn)自定義彈窗組件的全屏功能
在現(xiàn)代化的前端開(kāi)發(fā)中,彈窗組件是提升用戶(hù)體驗(yàn)的重要元素,本文將介紹如何使用 Vue 3 和 Element Plus 庫(kù)來(lái)創(chuàng)建一個(gè)具有全屏功能的自定義彈窗組件,文中通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-07-07
Vue項(xiàng)目引進(jìn)ElementUI組件的方法
這篇文章主要介紹了Vue項(xiàng)目引進(jìn)ElementUI組件的方法，本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-11-11
本文主要介紹了Vuex 命名空間 namespaced的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03