使用 Mutation VueJS 更改 state？

Question

所以我有一个 Vuex 商店设置，它返回我的headers和desserts 。 在我的desserts中，我有一个名为display的属性设置，它最初是错误的。 我有一个组件Row ，我将其导入到名为Table的父组件中。 Row组件接受几个道具，即Name和Display 。 display道具是从 vuex 商店的desserts返回的东西。 我正在尝试添加一个突变，以便在单击我的Row组件中的图标时，可以将display.laptop切换为 true 和 false。 我已经设置了toggleLaptopDisplay但我一直无法读取未定义的属性笔记本电脑。

请查看完整的CodeSandbox 。

这是完整的代码：

Vuex 商店：-

export default new Vuex.Store({
  state: {
    headers: [{ text: "Dessert (100g serving)", value: "name" }],
    desserts: [
      { name: "Lollipop", display: { laptop: true } },
      { name: "Marshamallow", display: { laptop: false } }
    ]
  },
  getters: {
    getHeaders: state => state.headers,
    getDesserts: state => state.desserts
  },
  mutations: {
    toggleLaptopDisplay(state) {
      state.desserts.display.laptop = !state.desserts.display.laptop;
    }
  }
});

这是表格组件：-

<template>
  <v-data-table :headers="getHeaders" :items="getDesserts" hide-actions select-all item-key="name">
    <template v-slot:headers="props">
      <tr>
        <th v-for="header in props.headers" :key="header.text">{{ header.text }}</th>
      </tr>
    </template>
    <template v-slot:items="props">
      <tr>
        <Row :name="props.item.name" :display="props.item.display"/>
      </tr>
    </template>
  </v-data-table>
</template>

<script>
import { mapGetters } from "vuex";
import Row from "./Row";
export default {
  components: {
    Row
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters({
      getHeaders: "getHeaders",
      getDesserts: "getDesserts"
    })
  }
};
</script>

这是行组件：-

<template>
  <div>
    {{name}}
    <v-icon @click="toggleLaptopDisplay" :color="display.laptop ? 'info': '' ">smartphone</v-icon>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  props: {
    name: String,
    display: Object
  },
  methods: {
    ...mapMutations({
      toggleLaptopDisplay: "toggleLaptopDisplay"
    })
  }
};
</script>

任何帮助将不胜感激。 谢谢：）

Answer 1

几件事可以实现您想要的：

在你的 Row.vue 中添加一个方法到 select 适当的元素：

<v-icon @click="toggleChange" :color="display.laptop ? 'info': '' ">smartphone</v-icon>

然后在方法中，创建一个将元素名称作为有效负载传递的方法：

methods: {
    toggleChange() {
        this.toggleLaptopDisplay(this.name)
      },
    ...mapMutations({
      toggleLaptopDisplay: "toggleLaptopDisplay"
    })
  }

最后，在 store.js 中，使用有效负载并改变所选元素：

mutations: {
    toggleLaptopDisplay(state, payload) {
      state.desserts.find(dessert => dessert.name === payload).display.laptop = !state.desserts.find(dessert => dessert.name === payload).display.laptop
    }
  }

编辑示例