时间戳

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

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

问题描述

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

默认.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>

商店/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);
  }
};

插件/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"],

标签： vue.jsnuxt.jsvuex

解决方案

如果你正在创建一个 mixin，它应该在/mixins
So 例如/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，没有插件入口。

推荐阅读