vuexで[Computed property "editA" was assigned to but it has no setter.] というエラーが出ます。

Question

現在todoアプリをvuexを用いてで作っております。
その過程で上記エラーがでてしました。

##やりたいことと
inputFormA という部分に値が入ったらその場編集のinputフォームを出したい。
v-if="!editA!という部分でtrue/falseで出現させるボタンを切り替えたい

##コード

Blogs.vue↓

<template>
  <div class="blogs-area column is-three-fifths">
    <div>
       <div v-for="blog in allBlogs" :key="blog.id">
        <div class="blog-box">
          <input v-if="inputFormA === blog" v-model="blog.title" v-focus>
          <h3 v-else>{{ blog.title }}</h3>
          <textarea class="textarea" v-if="inputFormA === blog" v-model="blog.description"></textarea>
          <p v-else>{{ blog.description }}</p>
          <div class="field is-grouped">
            <p class="control" v-if="!editA">
              <button class="button is-warning" @click="editBlog(blog)">
                Edit
              </button>
              <button class="button is-danger" @click="deleteBlog(blog.id)">
                Delete
              </button>
            </p>
            <p class="control" v-else>
              <button class="button is-success" @click="saveEditBlog(blog)">
                Save
              </button>
            </p>
          </div>
        </div>
        <hr>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      }
    }
  },
  computed: mapGetters(['allBlogs', 'inputFormA', 'editA']),
  methods: {
    ...mapActions(['fetchBlogs', 'deleteBlog', 'saveEditBlog']),
    editBlog(blog) {
      this.editA = true;
      this.inputFormA = blog;
    }
  },
  created() {
    this.fetchBlogs()
  }
}
</script>

store.js↓

~~

const state = {
  blogs: [],
  inputForm: null,
  edit: false
};

const getters = {
  allBlogs: state => state.blogs,
  inputFormA: state => state.inputForm,
  editA: state => state.edit
};

const mutations = {

 ~~
    const index = state.blogs.findIndex(i => i.id === blog.id);
    state.blogs.splice(index, 1, blog);
  },
};

const actions = {

 ~~

  async saveEditBlog({ commit }, blog) {
    await axios.patch(`${baseURL}/${blog.id}`, blog)
      .then(res => {
        commit('saveBlog', res)
        this.inputFormA = null,
        this.editA = false
      })
      .catch(e => console.log(e))
  }
};

export default {
  state,
  getters,
  mutations,
  actions
};

##問題点
getterの使い方がよくわかっておらず引数を渡せていないのかなと思いました。しかし解決方法がわからず質問させていただく運びとなりました。

足りない情報などありましたら言ってくださるとありがたいです。
ご教授お願いいたします????‍♂️

Answer 1

VuexのGettersは、stateの値を変換して取得するための機能です。
名前の通り、get(取得)する機能だけが提供されます。

// Get => OK
const value = this.editA

// Set => NG
this.editA = true

ueda_kesukeさんのコードでは、このgetterに対して、set(代入)を行っているため、エラーになっています。

this.inputFormA = null,
this.editA = false

コードを見る限り、ueda_kesukeさんが更新したいデータはinputFormとeditでありませんか？

---

Vuexでの基本的な利用方法は、公式ドキュメントにある通り、stateを更新して、そのstateを利用している(複数の)Vueコンポーネント(Vue components)を更新することです。

このとき、各々のコンポーネントがそれぞれ同じ方法でstateの値を変換するComputed Propertyを持っていると、それは非効率です。この場合に、VuexのGettersを利用してstateを変換して利用するロジックを一箇所で定義できるのです。

---

ちなみに、VuexのGettersに限らず、Vue.js本体のComputed Propertyも、SetterとGetterを別々に定義することができます(公式ドキュメント該当箇所)。普段はSetterを省略して書いていることが多いと思うので、あまり意識していないかもしれません。

重要なことは、VuexのGettersも、Computed PropertyのGetterも、値を取得するための「関数」を定義しているということです(Setterは内部で別のdata/stateに値を代入するための関数)。

---

GetterやSetterは、Vue.jsに特有の概念ではなく、JavaScriptの言語仕様の一部です。
よりさかのぼって情報を得たい場合は、MDNのGetterの説明やSetterの説明をご覧ください。

Comments

[ueda_kesuke]

参考資料も掲載いただきありがとうございます！おっしゃる通り代入という部分で意味がわかっていなかったです。NozomuIkutaさんの解説でふに落ちました。違うアプローチで実装することができました。本当にありがとうございました！

[NozomuIkuta]

解決したようでよかったです