回答編集履歴

長文追記した。

2020/08/17 06:23

投稿

dameo

スコア943

test CHANGED Viewed

@@ -159,3 +159,277 @@
 </html>
 ```
+## 追記
+長々と書くのもアレだったので短く書きすぎました。解決後ですが追記しておきます。
+まず、nuxt.jsを使ったもので説明します。
+``npx create-nuxt-app sample-nuxt``を↓な感じで作ります。
+```text
+create-nuxt-app v3.2.0
+✨  Generating Nuxt.js project in sample-nuxt
+? Project name: sample-nuxt
+? Programming language: JavaScript
+? Package manager: Npm
+? UI framework: Vuetify.js
+? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
+? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
+? Testing framework: None
+? Rendering mode: Single Page App
+? Deployment target: Server (Node.js hosting)
+? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
+```
+次に以下のファイルを作ったり、置き換えたりします。
+**pages/index.vue**
+```vue
+<template>
+  <v-container>
+    <counter />
+  </v-container>
+</template>
+<script>
+import Counter from "~/components/Counter.vue";
+export default {
+  components: {
+    Counter,
+  },
+};
+</script>
+```
+**components/Counter.vue**
+```vue
+<template>
+  <v-card>
+    <v-card-title>{{ count }}</v-card-title>
+    <v-card-actions>
+      <v-btn text @click="increment()">increment</v-btn>
+      <v-btn text @click="push()">push</v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+<script>
+import { mapMutations, mapGetters } from 'vuex'
+export default {
+  name: "Counter",
+  computed: {
+    count: function () {
+      return this.$store.getters['counterstore/count'];
+    },
+  },
+  methods: {
+    increment: function () {
+      console.log("vue_component: this.$vuetify=" + this.$vuetify);
+      this.$store.commit("counterstore/increment");
+    },
+    push: function () {
+      this.$store.commit("counterstore/push", this.$vuetify);
+    },
+  },
+};
+</script>
+```
+**store/counterstore.js**
+```javascript
+export const state = () => ({
+    counter: 0
+})
+export const mutations = {
+    increment(state) {
+        state.counter++;
+        console.log("store_increment: this.$vuetify =" + this.$vuetify);
+    },
+    push(state, args) {
+        // 無理矢理受け渡す
+        this.$vuetify = args;
+        console.log("store_push: this.$vuetify is set!");
+    }
+}
+export const getters = {
+    count(state) {
+        if (this != null) {
+            console.log('store_getters: this.$vuetify =' + this.$vuetify);
+        } else {
+            console.log('store_getters: this =' + this);
+        }
+        return state.counter;
+    },
+}
+```
+動かすと、初期画面がこんな感じになります。
+![イメージ説明](088602bcf8b96781446acb0d27a9343d.png)
+consoleの表示は、
+```text
+store_getters: this =undefined
+```
+な感じです。gettersでは呼出元が関数呼出してるので、thisが入っていません。
+まずgettersを使うとthis.$vuetifyは無理なのですよ。
+次にINCREMENTボタンを押します。するとconsoleは
+```text
+vue_component: this.$vuetify=[object Object]
+store_increment: this.$vuetify =undefined
+store_getters: this =undefined
+```
+と出ています。vueコンポーネントからはthis.$vuetifyが入っていますが、生成時にプラグインからそういうのを入れるカラクリがないstoreにはthis.$vuetifyが入っていないのが分かります。
+仕方がないので実装したPUSHボタンを押すと...
+```text
+store_push: this.$vuetify is set!
+```
+引数で無理矢理コンポーネントから参照してたvuetifyのインスタンスを渡されるので、storeにvuetifyが設定されます。
+再度INCREMENTを押すと...
+```text
+vue_component: this.$vuetify=[object Object]
+store_increment: this.$vuetify =[object Object]
+store_getters: this =undefined
+```
+store側のincrementでthis.$vuetifyが入ってることが分かります。getterでは相変わらず見えませんが...
+つまり、**Vueコンポーネントでは見えるthis.$vuetifyも、Vuexからはインスタンス生成しただけでは見えない**ということです。またgettersからはどうやっても見えません(Vue.prototype.$vuetifyも駄目でした。今はそういう渡し方じゃないのかも)。で、それを伝えようとしたのが最初のコードだったわけです。なお、この辺TypeScriptだとまた事情が変わるかもです。そのクラス表記はさらに不明です。
+長文失礼しました。詳しい部分じゃないので、間違ってたら指摘お願いします。