将 v-model 与 Vuex 商店一起使用时出现 Vuetify 导航抽屉错误答案

【问题标题】：Vuetify navigation-drawer errors when using v-model with Vuex store将 v-model 与 Vuex 商店一起使用时出现 Vuetify 导航抽屉错误
【发布时间】：2021-03-18 18:59:04
【问题描述】：

我正在尝试使用Vuex 存储来保存将控制v-navigation-drawer 组件是否打开/可见的变量。原因是因为我想知道 nav-drawer 是否从其他一些组件打开并有条件地将类应用于某些元素。来自我的App.vue的一些代码：

<v-navigation-drawer app v-model="this.$store.state.showNavDrawer" ...
...
<v-app-bar-nav-icon @click="toggleNavDrawer"></v-app-bar-nav-icon>
...
methods: {
    toggleNavDrawer() {
        this.$store.commit('toggleNavDrawer');
    },
},

在我的main.js 中定义了我的 Vuex 数据：

const store = new Vuex.Store({
   state: {
      showNavDrawer: null,
   },
   mutations: {
      toggleNavDrawer(state) {
         state.showNavDrawer = !state.showNavDrawer;
      },
   },

在初始页面加载时，屏幕尺寸会受到尊重，并且导航抽屉按应有的方式显示/隐藏，但控制台上会显示以下错误：

[Vue warn]: Error in v-on handler: "TypeError: this is null"

found in

---> <VNavigationDrawer>
       <VApp>
         <App> at src/App.vue
           <Root> vue.runtime.esm.js:619
TypeError: this is null
    callback App.vue:17
    VueJS 4
    isActive VNavigationDrawer.ts:248
    VueJS 7
    confirmTransition vue-router.esm.js:2342
    step vue-router.esm.js:1944
    step vue-router.esm.js:1951
    runQueue vue-router.esm.js:1955
    confirmTransition vue-router.esm.js:2335
    step vue-router.esm.js:1944
    step vue-router.esm.js:1948
    iterator vue-router.esm.js:2322
    resolveAsyncComponents vue-router.esm.js:2105
    iterator vue-router.esm.js:2300
    step vue-router.esm.js:1947
    step vue-router.esm.js:1951
    runQueue vue-router.esm.js:1955
    confirmTransition vue-router.esm.js:2330
    transitionTo vue-router.esm.js:2203
    init vue-router.esm.js:2923
    beforeCreate vue-router.esm.js:1271
    VueJS 4
    <anonymous> main.js:42
    js app.js:1113
    __webpack_require__ app.js:849
    fn app.js:151
    1 app.js:1234
    __webpack_require__ app.js:849
    checkDeferredModules app.js:46
    <anonymous> app.js:925
    <anonymous> app.js:928

nav-drawer 控件的第一次单击从不执行任何操作。导航抽屉没有移动，控制台中也没有错误。之后的每次点击都会正常显示/隐藏抽屉，但每次点击都会在控制台中出现错误：

[Vue warn]: Error in v-on handler: "TypeError: this is null"

found in

---> <VNavigationDrawer>
       <VApp>
         <App> at src/App.vue
           <Root> vue.runtime.esm.js:619
TypeError: this is null
    callback App.vue:17
    VueJS 4
    isActive VNavigationDrawer.ts:248
    VueJS 10
    toggleNavDrawer main.js:32
    wrappedMutationHandler vuex.esm.js:844
    commitIterator vuex.esm.js:466
    commit vuex.esm.js:465
    _withCommit vuex.esm.js:624
    commit vuex.esm.js:464
    boundCommit vuex.esm.js:409
    toggleNavDrawer App.vue:157
    VueJS 4
    click VBtn.ts:158
    VueJS 33

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

你不能 v-model 到 vuex。

您需要改用 :value="this.$store.state.showNavDrawer" 属性。然后用@click 事件修改它，就像你正在做的那样，你应该没问题。

注意：如果我是你，我会立即为你的初始状态提供一个布尔值，我认为将其设为 null 没有任何意义。

【讨论】：