Vue.js 和 vuex：this.$store 未定义

Posted 2023-02-22

【中文标题】Vue.js 和 vuex：this.$store 未定义

【英文标题】：Vue.js and vuex: this.$store is undefined

【发布时间】：2018-05-28 14:50:00

【问题描述】：

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

我的店铺是这样的： obs：我安装了vuex插件。

   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
)

我的应用程序.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>

产生错误的组件：

<template><div> title</div></template>

<script>

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


</script>

【问题讨论】：

你需要把它包含在main.js

将其包含在您调用new Vue的入口文件中。

我正在重做一本书的练习，以检查我是否已经修复了知识。我将我的与作者的进行了比较，找不到任何代码不匹配的地方。我做错的唯一一件事是将存储文件命名为 .vue 文件。在我将其更改为 .js (store.js) 后，它起作用了！

还有一件事，在我将文件系统上的 store.vue 文件重命名为 store.js 后，我必须重新启动服务器，否则我会得到“store.vue”未找到，或者类似的东西, 在控制台上。

【参考方案1】：

也许，您没有在 Vue 实例中包含store

您的应用入口点（app.js 或 main.js 或 index.js）必须包含以下代码：

import store from './store'

new Vue(
 ...
 store,
 ...
)

那么你可以在任何组件中使用this.$store

但我推荐通用架构：https://vuex.vuejs.org/en/structure.html

【参考方案2】：

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

错误实际上在这里：

App.vue

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

【讨论】：

@Diego Alves 也许你可以帮助我。看看这个：***.com/questions/49487276/…

【参考方案3】：

在您的 main.js 文件中

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import Vuex from 'vuex';
import store  from './store'  //use curly braces to around store. 

Vue.config.productionTip = false;

Vue.use(Vuex);

new Vue(
  router,
  store,
  render: (h) => h(App),
).$mount("#app");

这对我有用。

【参考方案4】：

就我而言，我使用的是模块。我可以毫无问题地访问突变、动作和吸气剂。但不是国家。解决方案是在使用模块时，状态应该使用模块的命名空间进行访问。

查看documentation 了解更多信息。

const moduleA = 
  state:  ... ,
  mutations:  ... ,
  actions:  ... ,
  getters:  ... 


const moduleB = 
 state:  ... ,
 mutations:  ... ,
 actions:  ... 


const store = new Vuex.Store(
    modules: 
    a: moduleA,
    b: moduleB
  
)

store.state.a // -> `moduleA`'s state
store.state.b // -> `moduleB`'s state

默认情况下，模块内的动作、突变和getter仍然注册在全局命名空间下

【讨论】：

花了很长时间试图弄清楚这一点。谢谢

【参考方案5】：

1.确保你创建一个商店目录

2.npm i vuex -S

3.确保src／store/index.js有import Vuex from 'vuex'和Vue.use(Vuex)

4.确保src／main.js有import store from './store'