使用数组中的值初始化 Vuex 参数答案

【问题标题】：Initializing Vuex parameter with a value from an array使用数组中的值初始化 Vuex 参数
【发布时间】：2020-06-02 03:35:43
【问题描述】：

我有 Vuex 的这段代码，我想将参数的默认值初始化为 Vuex 数组中的值。我该怎么做？

passcode: this.state.passcodes[0].value

这会导致错误声明

Cannot read property 'state' of undefined

const store = new Vuex.Store({
  state: {
    passcodes: [
      {
        label: 'Pass1',
        value: '123456',
      },
      {
        label: 'Pass2',
        value: '654321',
      }
    ],
    data: [
      {
        name: '',
        passcode: this.state.passcode[0].value
      }
    ]
  }
})

我该怎么做？？

【问题讨论】：

标签： javascript node.js vue.js vuex quasar

【解决方案1】：

const passcodes = [
  {
    label: 'Pass1',
    value: '123456',
  },
  {
    label: 'Pass2',
    value: '654321',
  }
]

const store = new Vuex.Store({
  state: {
    passcodes,
    data: [
      {
        name: '',
        passcode: passcodes[0].value
      }
    ]
  }
})

【讨论】：

我们可以从 Vuex 商店内部以其他方式进行操作吗？
不是你想要的方式。您必须在创建商店后进行更改。

【解决方案2】：

像这样使用 Getter：

const store = new Vuex.Store({
  state: {
    passcodes: [
      { label: 'Pass1', value: 123456 },
      { label: 'Pass2', value: 654321 }
    ]
  },
  getters: {
    defaultPass: state => {
      return state.passcodes[0]
    }
  }
})

然后您可以通过store.getters.defaultPass 访问您的默认设置。

或者像这样的突变：

const store = new Vuex.Store({
  state: {
    passcodes: [
      { label: 'Pass1', value: 123456 },
      { label: 'Pass2', value: 654321 }
    ],
    defaultPass: '',
  },
  mutations: {
    default(state, n): {
      state.defaultPass = state.passcodes[n]
    }
  }
})

然后您可以使用store.commit('default', 0) 设置默认值。

【讨论】：