快捷導(dǎo)航

解決Vue 給mapState中定義的屬性賦值報(bào)錯(cuò)的問(wèn)題

更新時(shí)間：2020年06月22日 08:50:14 作者：授客

這篇文章主要介紹了解決Vue 給mapState中定義的屬性賦值報(bào)錯(cuò)的問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

1. 實(shí)踐環(huán)境

2. 問(wèn)題描述

<script>
import { mapState } from 'vuex';
export default {
 name: "displayCount",
 computed: {
  ...mapState({
   ...略
   count: state => state.a.count
  })
 },
 methods: {
  increaseCount () {
   this.count = this.count + 1
  }
 }
};
</script>
<style>
</style>

如上，我們希望在執(zhí)行increaseCount函數(shù)時(shí)，給mapstate函數(shù)中映射定義的this.count賦值，給該值增加1，結(jié)果，提示

[Vue warn]: Computed property "count" was assigned to but it has no setter.

3. 解決方案1

如下，把屬性“移出mapState”，然后為屬性新增get，set方法，分別用于獲取值和改變值（按store狀態(tài)管理規(guī)定的方式）

<script>
import { mapState } from 'vuex';
export default {
 name: "displayCount",
 computed: {
  ...mapState({
...略
  }),
  count: {
   get() {
    return this.$store.state.a.count;
   },
   set(val) {
    this.$store.commit("increaseCount", val);
   }
  }
 },
 methods: {
  increaseCount () {
   this.count = this.count + 1
  }
 }
};
</script>

注意：this.$store.commit("increaseCount", val);中的increaseCount方法名稱(chēng)，并不是methods中定義的方法名稱(chēng)，而是store中定義的方法

4. 解決方案2

通過(guò)對(duì)比當(dāng)前屬性值和store狀態(tài)值，然后根據(jù)比較結(jié)果，決定是否根據(jù)store狀態(tài)管理規(guī)則更新?tīng)顟B(tài)值。

<script>
import { mapState } from 'vuex';
export default {
 name: "displayCount",
 computed: {
  ...mapState({
   count: state => state.a.count
  })
 },
 methods: {
  increaseCount () {
   if (this.count == this.$store.state.a.count) {
    this.$store.commit("increaseCount", this.count+1);
   }
  }
 }
};
</script>

總結(jié)

到此這篇關(guān)于解決Vue 給mapState中定義的屬性賦值報(bào)錯(cuò)的問(wèn)題的文章就介紹到這了,更多相關(guān)vue給mapState屬性賦值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue+ssh框架實(shí)現(xiàn)在線(xiàn)聊天
這篇文章主要為大家詳細(xì)介紹了Vue+ssh框架實(shí)現(xiàn)在線(xiàn)聊天，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
Vue如何使用cdn加載資源加快打包速度
外部的庫(kù)文件,可以使用CDN資源,或者別的服務(wù)器資源等,下面這篇文章主要給大家介紹了關(guān)于Vue如何使用cdn加載資源加快打包速度的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-05-05
使用elementUI table展開(kāi)行內(nèi)嵌套table問(wèn)題
這篇文章主要介紹了使用elementUI table展開(kāi)行內(nèi)嵌套table問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
Vue + iView實(shí)現(xiàn)Excel上傳功能的完整代碼
前一段時(shí)間項(xiàng)目經(jīng)歷了前端上傳文件的過(guò)程，首先進(jìn)入頁(yè)面會(huì)展示默認(rèn)的樣子，選中要上傳的excel文件，本文通過(guò)實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì)，需要的朋友參考下吧
2021-06-06
Vue中使用?Aplayer?和?Metingjs?添加音樂(lè)插件的方式
這篇文章主要介紹了Vue中使用?Aplayer?和?Metingjs?添加音樂(lè)插件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-08-08
ES6 Proxy實(shí)現(xiàn)Vue的變化檢測(cè)問(wèn)題
Vue3.0將采用ES6 Proxy的形式重新實(shí)現(xiàn)Vue的變化檢測(cè)，在官方還沒(méi)給出新方法之前，我們先實(shí)現(xiàn)一個(gè)基于Proxy的變化檢測(cè)。感興趣的朋友跟隨小編一起看看吧
2019-06-06
Vue3使用icon的兩種方式實(shí)例
vue開(kāi)發(fā)網(wǎng)站的時(shí)候,往往圖標(biāo)是起著很重要的作用,下面這篇文章主要給大家介紹了關(guān)于Vue3使用icon的兩種方式,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2021-11-11
vue中實(shí)現(xiàn)圖片和文件上傳的示例代碼
下面小編就為大家分享一篇在vue中實(shí)現(xiàn)圖片和文件上傳的示例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
vue項(xiàng)目中實(shí)現(xiàn)緩存的最佳方案詳解
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中實(shí)現(xiàn)緩存的最佳方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-07-07
vscode下vue項(xiàng)目中eslint的使用方法
這篇文章主要給大家介紹了關(guān)于vscode下vue項(xiàng)目中eslint的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-01-01