首页 > 解决方案 > 如何从操作中访问状态属性?

问题描述

我正在尝试从动作中访问状态中的信息。状态是具有 ID 属性的对象数组。

在检查动作中的变量state.devices时,我只看到: state.devices 来自一个动作

从 mutator 中检查相同的变量正好显示了我想看到的内容: state.devices 来自 mutator

这是一个示例各种尝试的快速片段。抱歉,它无法运行。

const state = {
  devices: {}
};

const getters = {
  devices: state => state.devices || {}
};

const actions = {
  [DEVICE_EVENT_ACTION]: ({ commit }, event) => {

    // Attempt 0: exits prematurely
    let storedDevice0 = getters
      .devices(state)
      .find(d => d.deviceId === event.deviceId);

    // Attempt 1: exits prematurely
    let storedDevice1 = JSON.parse(JSON.stringify(state.device)).find(
      x => x.deviceId === event.deviceId
    );
    
    // Attempt 2: exits prematurely
    let storedDevice2 = state.devices.find(x => x.deviceId === event.deviceId);

    // Attempt 3: exits prematurely
    let storedDevice3;
    for (let d in state.devices) {
      if (state.devices[d].deviceId === event.deviceId) {
        storedDevice3 = state.devices[d];
      }
    }

    console.log(storedDevice0); // nothing
    console.log(storedDevice1); // nothing
    console.log(storedDevice2); // nothing
    console.log(storedDevice3); // nothing
    
    commit(DEVICE_UPDATED, event);
  }
};

const mutations = {
  [DEVICE_UPDATED](state, event) {
    // Attempt 0
    let storedDevice0 = getters
      .devices(state)
      .find(d => d.deviceId === event.deviceId);

    // Attempt 1
    let storedDevice1 = JSON.parse(JSON.stringify(state.devices)).find(
      x => x.deviceId === event.deviceId
    );

    // Attempt 2: 
    let storedDevice2 = state.devices.find(x => x.deviceId === event.deviceId);

    // Attempt 3
    let storedDevice3;
    for (let d in state.devices) {
      if (state.devices[d].deviceId === event.deviceId) {
        storedDevice3 = state.devices[d];
      }
    }

    console.log(storedDevice0); // works
    console.log(storedDevice1); // works
    console.log(storedDevice2); // works
    console.log(storedDevice3); // works
  }
};

我在文档中找不到任何提及这一点的内容。为什么会有所不同,以及如何在操作中访问该状态列表属性?这个选择背后的逻辑是我的操作可以更具体,它调用更通用的“设备更新”突变器,它允许我记录并通知用户状态对象中不存在但确实存在的相关数据在商店的device数组中。

标签: javascriptvue.jsvuex

解决方案


推荐阅读