[Vue 警告]：属性或方法“stateSidebar”未在实例上定义，但在渲染期间被引用答案

【问题标题】：[Vue warn]: Property or method "stateSidebar" is not defined on the instance but referenced during render[Vue 警告]：属性或方法“stateSidebar”未在实例上定义，但在渲染期间被引用
【发布时间】：2021-08-13 22:15:40
【问题描述】：

我知道这似乎是一个很容易找到的问题，但我的代码前段时间有效。我正在使用 Vuex 绑定来检查我的侧边栏是否应该可见，所以应该在我的整个项目中设置 stateSidebar。

default.vue

<template>
  <div>
    <TopNav />
    <SidebarAuth v-if="stateSidebar" />
    <Nuxt />
  </div>
</template>

<script>
import TopNav from './partials/TopNav';
import SidebarAuth from './partials/SidebarAuth';

export default {
  components: {
    TopNav,
    SidebarAuth
  },
  methods: {
    setStateSidebar(event, state) {
      this.$store.dispatch('sidebar/setState', state)
    }
  }
}
</script>

store/sidebar.js

export const state = () => ({
  stateSidebar: false
});

export const getters = {
  stateSidebar(state) {
    return state.stateSidebar;
  }
};

export const mutations = {
  SET_SIDEBAR_STATE(state, stateSidebar) {
    state.stateSidebar = stateSidebar;
  }
};

export const actions = {
  setState({ commit }, stateSidebar) {
    commit('SET_SIDEBAR_STATE', stateSidebar);
  },
  clearState({ commit }) {
    commit('SET_SIDEBAR_STATE', false);
  }
};

plugins/mixins/sidebar.js

import Vue from 'vue';

import { mapGetters } from 'vuex';

const Sidebar = {
  install(Vue, options) {
    Vue.mixin({
      computed: {
        ...mapGetters({
          stateSidebar: 'sidebar/stateSidebar'
        })
      }
    })
  }
}

Vue.use(Sidebar);

nuxt.config.js

 plugins: ["./plugins/mixins/validation", "./plugins/axios", "./plugins/mixins/sidebar"],

【问题讨论】：

...mapGetters({stateSidebar: 'sidebar/stateSidebar'}) 应该在 default.vue 中
@BülentAkgül 实际上我只是通过重新保存nuxt.config.js 文件来修复它。我不知道是什么导致了这个问题。我正在使用 Github，它告诉我：No content changes found.

标签： vue.js nuxt.js vuex

【解决方案1】：

如果你正在创建一个 mixin，它应该在 /mixins
比如/mixins/my-mixin.js。

export default {
  // vuex mixin
}

然后在default.vue中这样导入

<script>
import myMixin from '~/mixins/my-mixin`

export default {
  mixins: [myMixin],
}

这不是plugins 应该用于的。 IMO，你应该明确地在这里做一些更简单和更短的东西，使用更少的样板，并且不会在 vue3（mixins）中被弃用。

这是 IMO 推荐的使用方式

<template>
  <div>
    <TopNav />
    <SidebarAuth v-if="stateSidebar" />
    <Nuxt />
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState('sidebar', ['stateSidebar']) // no need to use object syntax nor a getter since you're just fetching the state here
  },
}
</script>

没有mixin，没有插件入口。

【讨论】：