欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2020年06月22日 08:50:14   作者：授客  
這篇文章主要介紹了解決Vue 給mapState中定義的屬性賦值報(bào)錯(cuò)的問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

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

Vue 2.9.6

2. 問題描述

<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方法名稱，并不是methods中定義的方法名稱，而是store中定義的方法

4. 解決方案2

通過對(duì)比當(dāng)前屬性值和store狀態(tài)值，然后根據(jù)比較結(jié)果，決定是否根據(jù)store狀態(tài)管理規(guī)則更新狀態(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ò)的問題的文章就介紹到這了,更多相關(guān)vue給mapState屬性賦值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論