所以我对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>
我已经尝试过以下可能性:
使用import store from './store';
而不是import { store } from './store';
使用store: store
,而不是store,
使用Vue.use(Vuex);
而不是Vue.use(Vuex, {});
使用export default store = new Vuex.Store
而不是export const store = new Vuex.Store
不是将控制台放入已创建的挂钩中,而是放入方法中,并创建了一个按钮来触发它。
将控制台放入其他子组件中,这些子组件嵌套在不同的深度
在我进行了很多类似的操作并尝试了很多之后(服务器重新启动20多个时间)。我仍然可以获得这个$ store。我有点需要帮助。
我不认为这个问题是重复的,因为我已经阅读了其他问题并尝试了所有可能。如果它们都失败了,那么这里肯定是带有防雷代码的新内容。
答案 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中的变量创建getter
,mutation
和action
,您应该不直接处理状态。
在main.js
中使用store
或store: 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>