快捷導(dǎo)航

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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vuex
賦值

相關(guān)文章

ant-design-vue 快速避坑指南(推薦)
ant-design-vue是螞蟻金服 Ant Design 官方唯一推薦的Vue版UI組件庫，它其實是Ant Design的Vue實現(xiàn)，組件的風(fēng)格與Ant Design保持同步，組件的html結(jié)構(gòu)和css樣式也保持一致，很多朋友在使用過程中遇到很多問題，今天小編就給大家分享一篇教程幫助大家快速閉坑，一起看看吧
2020-01-01
Vue通過Blob對象實現(xiàn)導(dǎo)出Excel功能示例代碼
這篇文章主要介紹了Vue通過Blob對象實現(xiàn)導(dǎo)出Excel功能,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
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實現(xiàn)前端星星評分功能組件實例代碼
本文通過實例代碼給大家介紹了vue2.0實現(xiàn)前端星星評分功能組件，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
2018-02-02
Vue ElementUI this.$confirm async await封
這篇文章主要介紹了Vue ElementUI this.$confirm async await封裝方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
axios如何取消重復(fù)無用的請求詳解
這篇文章主要給大家介紹了關(guān)于axios如何取消重復(fù)無用的請求的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用axios具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
vue實現(xiàn)頁面渲染時候執(zhí)行某需求的示例代碼
本文主要介紹了vue實現(xiàn)頁面渲染時候執(zhí)行某需求,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-05-05
Vue.js中的圖片引用路徑的方式
當(dāng)我們在Vue.js項目中引用圖片時，關(guān)于圖片路徑有以下幾種情形,下面通過本文給大家分享Vue.js中的圖片引用路徑的方式，感興趣的朋友一起看看吧
2017-07-07
使用Nuxt.js改造已有項目的方法
這篇文章主要介紹了使用Nuxt.js改造已有項目的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
基于 Vue 的樹形選擇組件的示例代碼
本篇文章主要介紹了基于 Vue 的樹形選擇組件的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08