基本安装后无法在任何子组件中访问this。$ store(vuex)

时间:2018-11-14 21:41:08

标签: vue.js vuejs2 vuex

所以我对vuex完全陌生。我已将vuex小心地安装到我的vue应用程序中,但无法在任何子组件中访问this。$ store。

我还阅读了10个以上的问题,问了同样的事情,我做了很多更改,尝试了很多次。因为我以为我做对了所有事情,但仍然无法正常工作。我终于决定来这里问。我将在下面输入自己的代码:

文件结构(仅相关文件):

|---main.js
|---store.js
|---App.vue
|---components

main.js:

import '@babel/polyfill'
import Vue from 'vue'

import App from './App.vue'

import './plugins/vuetify'
import './plugins/vue-resource'
import { store } from './store';

require('../node_modules/ol/ol.css');

Vue.config.productionTip = false

fetch('static/App_Config.json')
  .then(function (response) {
    return response.json().then(function (AppConfig) {
      Vue.prototype.$AppConfig = AppConfig;

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

    });
  })

store.js:

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

Vue.use(Vuex, {
});

export const store = new Vuex.Store({
    state: {
        testText: "test string"
    }
});

在组件中:(简体,仅相关代码)

<script>
    created () {
        console.log("this.$store_test: ", this.$store);
    }
</script>

我已经尝试过以下可能性:

  1. 在main.js中:

使用import store from './store';而不是import { store } from './store';

  1. 在main.js中:

使用store: store,而不是store,

  1. 在store.js中:

使用Vue.use(Vuex);而不是Vue.use(Vuex, {});

  1. 在store.js中:(与1结合使用,我已经尝试了所有4种组合)

使用export default store = new Vuex.Store而不是export const store = new Vuex.Store

  1. 不是将控制台放入已创建的挂钩中,而是放入方法中,并创建了一个按钮来触发它。

  2. 将控制台放入其他子组件中,这些子组件嵌套在不同的深度

在我进行了很多类似的操作并尝试了很多之后(服务器重新启动20多个时间)。我仍然可以获得这个$ store。我有点需要帮助。

我不认为这个问题是重复的,因为我已经阅读了其他问题并尝试了所有可能。如果它们都失败了,那么这里肯定是带有防雷代码的新内容。

1 个答案:

答案 0 :(得分:-1)

这是有效的Vuex store.js文件:

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

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        testText: "test string";
    }
});

export default store;

请记住为Vuex中的变量创建gettermutationaction,您应该直接处理状态。

main.js中使用storestore: store并不重要,它们是相同的。

import store from './store'import { store } from './store'相同。

Vue.use(Vuex)Vue.use(Vuex, {})相同,只要您不提供任何选项即可。

您无需将商店存放在某个组件中,您可以在安装应用程序之前先加载Vuex,这样您就可以在例如main.js创建的钩子。

您的组件<script>标签不正确。您应该这样使用export default

<script>
export default {
    created () {
        // Check if console.log like this works better as well
        console.log("Store test:");
        console.log(this.$store);
    }
}
</script>