質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.34%

  • Vue.js

    835questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

  • TypeScript

    374questions

    TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

  • Electron

    205questions

    Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 584

nihcika

score 21

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を持っていません

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/14 11:43 編集

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

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

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

    キャンセル

  • 2018/06/15 00:09

    ローカルに環境構築して調べてみたところ、<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>

    キャンセル

  • 2018/06/15 11:35

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

    キャンセル

同じタグがついた質問を見る

  • Vue.js

    835questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

  • TypeScript

    374questions

    TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

  • Electron

    205questions

    Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。