Question

我正在尝试对Vue插件进行故障排除，以使其能够与Nuxt一起使用。它使用的是动态存储模块，由于某种原因，它使用的所有变异都会出现state is undefined错误。

它的基础是：

index.js

import mixin from './src/mixin'
import store from './src/store'

export default {
    install: function(Vue, options = {}) {
        options = {
            store: null,
            ...options
        }

        options.store.registerModule('shopify', store)

        // define mixin
        Vue.mixin(mixin)
    }
}

然后store.js文件基本上是这样的：

export default {
    state: {
        product: [],
    },
    mutations: {
        UPDATE_CACHED_RESULT(state, { id, data }) {
            // This is the line that throws a state error
            state.product[id] = data
        }
    },
    actions: {
    }
}

我假设我现在在Nuxt设置中存在语法错误，但是我正在绘制空白。

有帮助吗？

谢谢！

Answer 1

您应该通过store属性访问context。如Nuxt.js文档中所述，如果导出函数，则将提供context作为该函数的第一个参数。因此，您可以访问应用程序的实际store，并对商店进行一些更改（在您的情况下为注册模块）。

export default (context, inject) => {
  context.store.registerModule("foo", {
    state: {
      id: 1
    },
    mutations: {
      bar(state) {
        state.id = 2;
      }
    }
  });
}

然后在nuxt.config.js中注册该插件：

plugins: [
  "~/plugins/name-of-your-plugin"
]

P.S .：此模块注册在我的应用程序中效果很好，但是我不确定mixin，也许添加以下代码行可能会有所帮助：

import Vue from "vue";
import mixin from "./src/mixin";

Vue.mixin(mixin);

// then export aforementioned function.

Reference。

Vuex动态模块突变中的未定义状态

1 个答案: