首页 > 解决方案 > 如何使用 vuex 访问数组对象?

问题描述

我正在使用 Vuejs 制作一个 chrome 扩展。

我的一些店铺如下。

// states
export default new Vuex.Store({
state: {
....
obj1: {
      inObj1: {
        a: [],
        b: [],
        c: []
      },
      inObj2: {
        a: [],
        b: [],
        c: []
      },
      inObj3: {
        a: [],
        b: [],
        c: []
      }
    }
}

并且在动作中接收到 http 响应后,此状态正在更改为突变。

// actions
// 1st action (update A)
....
axios.post(url, {
    from: (Date.now() - 5000000).toString(),
    to: (Date.now() + 5000000).toString(),
    queries: [query]
  }, { withCredentials: true })
    .then(ret => {
      commit(types.UPDATE_A, {
        data: ret.data,
        product: payload.product,
        env: payload.env
      })
    })
    .catch(err => {
      console.log('in promise: ', err)
    })

// 2nd action (update B)
  axios
    .get(url)
    .then(ret => {
      commit(types.UPDATE_B, {
        product: payload.product,
        env: state.env.pub,
        data: ret.data.demandMap,
        src: state.sources.b,
        memberNo: payload.memberNo
      })
    })
    .catch(err => {
      console.log(err)
    })
// 3th action
  axios
    .get(url)
    .then(ret => {
      commit(types.UPDATE_C, {
        product: payload.product,
        env: state.env.pub,
        data: ret.data.demandMap,
        src: state.sources.c,
        memberNo: payload.memberNo
      })
    })
    .catch(err => {
      console.log(err)
    })
// mutations
// After updating A, update B and C within for loop with A's response.
...
case state.products.vs.code: {
        for (let i = 0; i < tables.rows.length; i++) {
          state.billing.Obj1[state.sources.a].push({
            memberNo: tables.rows[i][memIdx],
            product: payload.product,
            env: payload.env,
            source: 'A',
            charge: tables.rows[i][chargeIdx]
          })
          getB(tables.rows[i][memIdx], payload.product, payload.env)
        }
        break
      }
// 
...

通过使用 Vue Devtools,我可以看到有对象被推入数组,但它们的aandb是.cundefined

console.log('process done : ', this.obj[this.productName].a) -> undefined 请参考变量名称可能不准确的事实,因为上面的代码针对问题进行了部分修改。

为什么我不能在静音但其他 getter 和 Vue 中访问它?帮我。

标签: javascriptgoogle-chromevue.js

解决方案


推荐阅读