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

Posted 2023-02-23

【中文标题】[Vue 警告]：属性或方法“stateSidebar”未在实例上定义，但在渲染期间被引用

【英文标题】：[Vue warn]: Property or method "stateSidebar" is not defined on the instance but referenced during render

【发布时间】：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.

【参考方案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，没有插件入口。