Question

我在资产目录中的单独文件中有两个（大）javascript对象。它们都需要导入到我的store.js文件中。

我的store.js的相关部分

import Vue from 'vue'
import Vuex from 'vuex'
import pathify from 'vuex-pathify'
import {make} from 'vuex-pathify'
import requiredParam from '@/assets/requiredParameters.js'
import optionalParam from '@/assets/optionalParameters.js'

Vue.use(Vuex);

var rp = JSON.parse(JSON.stringify(requiredParam));
var op = JSON.parse(JSON.stringify(optionalParam));

console.log(requiredParam,optionalParam);
console.log(rp,op);

var state = {
    requiredParam: rp,
    optionalParam: op,
    jobId: null,
    jobHistory: null,
    jobStatus: null,
    messages: [],
    geocodeReq: null,
    geocodeModal: false,
};
console.log(state)

const mutations = make.mutations(state);

export default new Vuex.Store({
  plugins: [pathify.plugin],
  state,
  mutations,

  getters: {
    orderLen: (state)=>{
        console.log(state)
        return Object.keys(state.requiredParam.Order).length
    },

    depotLen: (state)=>{
        return Object.keys(state.requiredParam.Depot).length
    },

    routeLen: (state)=>{
        return Object.keys(state.requiredParam.Route).length
    },

  },


})

在Vue CLI 3开发服务器中，一切正常。当我运行构建并查看生产构建的控制台时，一切都看起来正确，直到记录了状态。即使在控制台中正确记录了rp和op，仍未定义必需的参数和可选的参数。

我知道这与webpack有关，但是我以前从未使用过它，所以我不确定为什么会这样。

是否有解决方案或更好的解决方法？

对象需要保存在单独的文件中，因为它们将由对JavaScript知识很少的其他人进行编辑。

最初这些文件是.JSON，而我试图

var state = {
    requiredParam: require('@/assets/requiredParameters.json'),
    optionalParam: require('@/assets/optionalParameters.json'),
    jobId: null,
    jobHistory: null,
    jobStatus: null,
    messages: [],
    geocodeReq: null,
    geocodeModal: false,
};

但是这没有用，因为webpack没有在Assets文件夹中正确包含文件。

Answer 1

我发现了问题，实际上与webpack无关，我花了很长时间才弄清楚。

生产服务器是从github页面仓库中托管的，该仓库用于托管应用程序的先前版本。

还有一个localStorage变量，该变量仍与先前版本遗留在一起，其名称与当前版本使用的变量相同。

这导致商店值设置为未定义的值，并且由于控制台日志仅记录对商店的引用，直到我看到该值已被null覆盖。

vuex商店可在开发服务器中使用，但不能在生产版本中使用

1 个答案: