[Vue warn]: 属性或方法 "stateSidebar" 未在实例上定义但在渲染期间被引用

Question

我知道这似乎是一个很容易找到的问题，但我的代码很久以前就可以用了。我正在使用 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"],

Answer 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，没有插件条目。

[Vue warn]: 属性或方法 "stateSidebar" 未在实例上定义但在渲染期间被引用

[Vue warn]: Property or method "stateSidebar" is not defined on the instance but referenced during render

vue.js

vuex

nuxt.js

[Vue warn]: 属性 或方法 "stateSidebar" 未在实例上定义但在渲染期间被引用

[Vue warn]: Property or method "stateSidebar" is not defined on the instance but referenced during render

vue.js

vuex

nuxt.js

[Vue warn]: 属性或方法 "stateSidebar" 未在实例上定义但在渲染期间被引用