Vue.js 和 vuex:this.$store 未定义 [英] Vue.js and vuex: this.$store is undefined

问题描述

我已经阅读了标题相似的问题，但由于它们的复杂性，我无法关注它们.我认为使用我的代码会更容易为我找到解决方案.我只会包含相关代码.

我的店铺是这样的:obs:我安装了 vuex 插件.

 从 'vue' 导入 Vue；从 'vuex' 导入 Vuex；Vue.use(Vuex)常量状态 = {标题:请更改标题"}常量突变 = {更改标题(状态，标题){state.title=标题}}导出默认新 Vuex.Store({状态:状态，突变:突变})

我的 App.vue

 <模板><div><show-title-component></show-title-component><change-title-component></change-title-component>

</模板><脚本>从 './components/ShowtitleComponent' 导入 ShowTitleComponent；从'./components/ChangeTitleComponent'导入ChangeTitleComponent；从 './vuex/store' 导入商店；导出默认{组件:{ShowTitleComponent，ChangeTitleComponent}，店铺，数据:函数(){返回 {title: 'placeholder'}}}

产生错误的组件:

<脚本>导出默认{名称:显示标题组件"，计算:{标题() {返回 this.$store.state.title/** 此处出错 */}}}

解决方案

商店文件应该是 Javascript (.js) 文件.更改文件名并重新启动服务器会使 this.$tore 错误消失.

错误实际上在这里:

App.vue

从'./vuex/store'导入商店；/** 在我的情况下，它应该是 js 文件.*/

I have already read the question with similar titles but I cannot follow them due to their complexity. I think with my code it will be easier to find a solution for me. I will only include the relevant code.

My store is this: obs: I installed the vuex plugin.

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


Vue.use(Vuex)

const state = {
    titulo: "please, change title"
}


const mutations = {
    changeTitle(state, title) {
        state.title= title
    }
}


export default new Vuex.Store({

    state : state,
    mutations : mutations
})

My App.vue

 <template>
    <div>
      <show-title-component ></show-title-component>
      <change-title-component></change-title-component>
    </div>
</template>

<script>


import ShowTitleComponent from './components/ShowtitleComponent';
import ChangeTitleComponent from './components/ChangeTitleComponent';
import store from './vuex/store';

export default {

components: {ShowTitleComponent, ChangeTitleComponent},
store,
data: function() {
  return {title: 'placeholder'}
}


}
</script>

The component that generates the error:

<template><div>{{ title}}</div></template>

<script>

export default {
    name: "show-title-component",
    computed: {
      title() {
        return this.$store.state.title   /** error   here */
      }
    }
}

</script>

解决方案

The store file should be Javascript (.js) file. Changing the file name and rebooting the server make the this.$tore error vanish.

The error was actually here :

App.vue

import store from './vuex/store';  /** in my case, it should be js file. */

这篇关于Vue.js 和 vuex:this.$store 未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！