vuex直接賦值的三種方法總結(jié)
更新時間：2018年09月16日 14:24:12 作者：baidu_36681154
今天小編就為大家分享一篇vuex直接賦值的三種方法總結(jié)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
我們在編寫vuex代碼過程中，覺得在a.vue的模板里面寫入例如 <p>{{$store.state.num}}</p>很麻煩，我們希望直接就寫成{{num}},我們應(yīng)該怎么寫，vue給出三種固定寫法，大家理解之后基本照抄，稍做改動即可
第一種方法 通過computed的計算屬性直接賦值
1.store.js(vuex的代碼如下):
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state={//狀態(tài)對象
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><!--此處要實現(xiàn){{num}}的寫法,需要通過計算屬性進(jìn)行寫-->
<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的數(shù)組來賦值
代碼如下所示:
把上面的計算屬性直接改成下面這種形式
computed:mapState(["num"])
注：記得加上import {mapState} from 'vuex'
以上這篇vuex直接賦值的三種方法總結(jié)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
ant design vue嵌套表格及表格內(nèi)部編輯的用法說明
這篇文章主要介紹了ant design vue嵌套表格及表格內(nèi)部編輯的用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要為大家詳細(xì)介紹了如何利用Vue實現(xiàn)懸浮框自由移動+錄音功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以動手嘗試一下2022-07-07
在Vue.js應(yīng)用開發(fā)中,Vue Router 提供了許多特性來簡化前端路由管理和用戶體驗,其中一個重要的特性便是路由重定向和別名,它們可以幫助我們更好地管理和組織路由,本文將詳細(xì)介紹如何在Vue Router中使用路由重定向和別名,需要的朋友可以參考下2024-09-09
這篇文章主要為大家詳細(xì)介紹了如何利用vue實現(xiàn)拍照或錄像的功能,文中的示例代碼講解詳細(xì),具有一定的參考價值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
本文給大家介紹了使用vuex的state狀態(tài)對象的5種方式，給大家貼出了我的vuex的結(jié)構(gòu)，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-04-04
在antd Form表單中select設(shè)置初始值操作
這篇文章主要介紹了在antd Form表單中select設(shè)置初始值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
淺談Vue中的this.$store.state.xx.xx
這篇文章主要介紹了Vue中的this.$store.state.xx.xx用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-09-09
Vue3+Element Plus實現(xiàn)自定義彈窗組件的全屏功能
在現(xiàn)代化的前端開發(fā)中,彈窗組件是提升用戶體驗的重要元素,本文將介紹如何使用 Vue 3 和 Element Plus 庫來創(chuàng)建一個具有全屏功能的自定義彈窗組件,文中通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-07-07
這篇文章主要介紹了Vue項目引進(jìn)ElementUI組件的方法，本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-11-11
本文主要介紹了Vuex 命名空間 namespaced的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03