在组件中找不到 Vuex 数据存储

Posted 2023-02-23

【中文标题】在组件中找不到 Vuex 数据存储

【英文标题】：Vuex data store not found in components

【发布时间】：2018-08-10 01:26:35

【问题描述】：

我正在使用一个带有 Vue、Vuetify、Vue-Router 和 Vuex 的项目。其目的是创建一个带有侧边栏的基本布局，采用更模块化的方法，以涉足 Vue 的可扩展性。所以我创建了一个名为 Store 的文件夹，里面有一个 modules 文件夹。所以我在store文件夹中的索引文件如下：

import Vue from 'vue';
import Vuex from 'vuex';
import global from './Modules/Global';

Vue.use(Vuex);

export default new Vuex.Store(
     modules: 
          site: global
     
);

模块被分解为一个包含动作、getter、突变和状态的文件。

const actions = 
    sidebarState: ( commit , status) => 
        commit('openOrCloseSidebar', status);
    


const mutations = 
    openOrCloseMenu: (status) => 
        if (status !== true)
            return state.sidebar = true;

        return state.sidebar = false;
    
;

const getters = 

;

const state = 
    sidebar: true
;

export default 
    namespaced: true,
    actions,
    mutations,
    getters,
    state
;

我如下调用 Vue 实例。

import Vue from 'vue/dist/vue';
import Vuetify from 'vuetify';
import Axios from 'axios';

import application from './Template/Application.vue';

import router from './Router';
import store from './Store';
import  sync  from 'vuex-router-sync';

Vue.use(Vuetify);
Vue.use(router);
Vue.use(store);

sync(store, router);

var vue = new Vue(
    el: '#application',
    template: '<application></application>',
    components: 
        application
    ,

    router: router,
    store: store
);

但是，当我致电 this.$store.global.state.sidebar 或 this.$store.state.sidebar 时，Vue 无法找到我的财产。我收到错误：

无法读取未定义的全局属性。

该错误还引用了状态，但我相信由于我使用的是命名空间，因此语法应该反映在上面。我试图称呼它的地方就在这里。

<template>
    <v-container>
        <application_sidebar :my-prop="menu"></application_sidebar>
        <application_navigation :my-prop="menu"></application_navigation>        
    </v-container>
</template>

<script type="text/javascript">
    import application_navigation from './Navigation.vue'
    import application_sidebar from './Sidebar.vue';
    import  mapState  from 'vuex';

    export default (
        components: 
            application_navigation,
            application_sidebar
        ,

        data: 
            menu: this.$store.global.state.sidebar
        
    );
</script>

我正在尝试访问我的状态并学习如何正确发射，因此在导航组件中我可以向上发射，以便反映值以移动侧边栏打开或关闭。

任何帮助都会很棒，我对 Vue 还是很陌生。

【问题讨论】：

Afaik，您需要在 main.js 中将配置传递给您的商店。 Vue.use(Vuex); 也应该在你的 main.js 中

@connexo 我不是用调用它的Vue.use(store) 做的吗？

【参考方案1】：

我认为主要问题是您的模块状态路径应该是this.$store.state.site。

recommended method 是使用计算属性。例如

computed: 
  menu() 
    return this.$store.state.site.sidebar
  

您也可以使用mapState helper

import  mapState  from 'vuex'

export default 
  computed: mapState( menu: state => state.site.sidebar )

【讨论】：

状态对象的路径很好。您的解决方案绝对是设置需要对 vuex 状态做出反应的计算属性的最佳实践。这似乎是 OP 正在尝试做的事情（不清楚）。但我认为在某些情况下，知道您可以在 data 方法中使用存储中的值初始化数据属性是有帮助的，所以我也会留下我的答案。

您已经了解了一些情况，感谢您的回答。我仍然遇到类似的问题，但我相信我理解它想要做什么。

【参考方案2】：

当您尝试通过 this.$store 访问存储时，this 变量未引用 Vue 实例。

data 对象需要是返回对象的方法。

data() 
  return  menu: this.$store.state.site.sidebar ;

但是，通过像这样通过data 方法从商店的state 对象中检索值，您只需在Vue 实例初始化时设置menu 数据属性的值。 menu 的值不会更新以响应商店state 中值的更改。

如果您需要 menu 值在 Vue 实例的整个生命周期中反映 state 对象，那么您需要使用计算属性或 mapState，正如 @Phil 的回答中所建议的那样。

【讨论】：

我认为您需要访问this.$store.state.site.sidebar。请参阅我的更新答案。

感谢您的回答，您已经有所启发。