Question

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

请查看完整的CodeSandbox。

这是完整的代码：

Vuex商店：-

toggleLaptopDisplay

这是表格组件：-

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>

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

Answer 1

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

在Row.vue中添加一种方法来选择适当的元素：

<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
    }
  }

Edited Example

使用Mutation VueJS更改状态？

1 个答案: