Vue.jsで「A getter cannot have the same name as another state property. Rename one of them.」

2024年9月11日

今回はVue.jsを使っているときに「A getter cannot have the same name as another state property. Rename one of them.Found with “〇〇" in store “〇〇".」のようなwarningがChromeの開発者ツールのコンソールに出たときの対処法についてご紹介します。

Vue.jsのバージョンは3.5.0です。

Vue.jsで「A getter cannot have the same name as another state property. Rename one of them.」

結論を言うと、注意メッセージの通りで、warningの内容の通り、例えば冒頭の文章であれば「〇〇」の部分をリネームしましょう。

この場合、getterのメソッド名を変えることが一般的です。

例えば、下記のsample1.jsであればsample2.jsのようにしましょう。

・sample1.js

import { defineStore } from 'pinia'

export const useErrorStore = defineStore('test', {
  state: () => ({
    message: ''
  }),
  getters: {
    message: (state) => state.message !== '',
  },
})

import { defineStore } from 'pinia'

export const useErrorStore = defineStore('test', {

state: () => ({

message: ''

}),

getters: {

message: (state) => state.message !== '',

})

・sample2.js

import { defineStore } from 'pinia'

export const useErrorStore = defineStore('test', {
  state: () => ({
    message: ''
  }),
  getters: {
    getMessage: (state) => state.message !== '',
  },
})