vue-cli3.0 typescript electronで作ったデスクトップアプリでvuex storeがエラーを出す

Question

https://alligator.io/vuejs/using-new-vue-cli-3/

↑vue-cli3.0 で環境を構築しました

https://github.com/nklayman/vue-cli-plugin-electron-builder

↑エレクトロンビルダーを入れてデスクトップアプリ化しました

ブラウザでは正しく動いていたvuexがデスクトップアプリではうまく動きませんでした

//store.ts

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    myName: "二千花"
  },
  mutations: {
    'CHANGE_NAME'(state, newName) {
      state.myName = newName
    },
  },
  actions: {
    'CHANGE_NAME'({ commit }, newName) {
      if(newName != "名前変更"){
      commit('CHANGE_NAME', newName)
      }
    }
  },
  getters:{
    'GET_MY_NAME': state => { return state.myName }
  }
});

//main.ts

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

//単一ファイルコンポーネント(.vue)

<template>
  <div class="createNew">
    <div class="vuexData">
    
        <span>vuexで共通しているデータ→</span>

        <span>{{ getName() }}</span>

        <input type="text" v-model="text"/>

        <button @click="changeData">変更</button>
    
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component({
  components: {
  },
})
export default class createNew extends Vue {

    private text = "名前変更"

    private getName(){
        return this.$store.getters.GET_MY_NAME
    }

    private changeData(){
        this.$store.dispatch("CHANGE_NAME", this.text);
    }
}
</script>

最後の単一ファイルコンポーネントはrouter.tsの方に登録してあります

ブラウザでは上記コードでstoreにアクセス・変更などできていたのですが

npm run serve:electron

でデスクトップアプリを見ると

Cannot read property 'getters' of undefined"

などと言われてしまいます

//main.ts

global.vo = new Vue({
  router,
  store,
  render: (h) => h(App),
})

vo.$mount('#app');

//単一ファイルコンポーネント(.vue)

private getName(){
        return vo.$store.getters.GET_MY_NAME
        //return "あ"
    }

    private changeData(){
        vo.$store.dispatch("CHANGE_NAME", this.text);
        //alert("あ")
    }

このようにするとちゃんと動くのですが、ストアにアクセスするたびに

[Vue warn]: $attrs is readonly.

というエラーが吐かれてしまいます
(エラーを吐くのですが動きます)

どのように解決すればいいでしょうか
教えてください(T_T)

--------------------追記--------------------

npm run serveで見ると、thisは$storeを持っているのに、electronでビルドするとthisはstoreを持っていません

Answer 1

コンポーネントの getName メソッドに get を付けて computed プロパティにしてみてはいかがでしょう？

get getName(){
  return this.$store.getters.GET_MY_NAME
}

Comments

[退会済みユーザー]

回答ありがとうございます
getをつけてやっても、

return this.$store.getters.GET_MY_NAME の場合、
return vo.$store.getters.GET_MY_NAME の場合、

それぞれで前回と同様のエラーが出てしまいます,,,

[yhg]

ローカルに環境構築して調べてみたところ、<script> セクションを書いたコンポーネントだけ Vuex の $store に値を入れる Mixin が正常に適用されず、this.$store が undefined になってしまうようです。<script> セクションを消してみたら $store に値が入りました。

そこで、TypeScript ではなく JavaScript で <script> セクションを記述してみたところ、正常に動きました。ビルダーが最終的に吐く Webpack の設定に TypeScript 関連の不具合がありそうですね…。

大きな変更のあった vue-loader v15 もリリースされて間もないですし、 vue-cli v3.0 も昨日RC版になったところなので、ビルド関連が安定するまでもうしばらくかかりそうな気がします。

<script>
export default {
data() {
return {
text: '名前変更'
};
},
computed: {
getName() {
return this.$store.getters.GET_MY_NAME;
}
},
methods: {
changeData(){
this.$store.dispatch('CHANGE_NAME', this.text);
}
}
}
</script>

[退会済みユーザー]

環境構築、再現までしてくださり、本当に本当にありがとうございます(T_T)
わかりました、javascriptの書き方に一旦変更してみるか、デスクトップアプリ化の方法を他に模索するかもしれません...