변환 VueJ를 사용하여 상태를 변경하시겠습니까?

변환 VueJ를 사용하여 상태를 변경하시겠습니까?

Vuex Store 셋업이 있어서headers그리고.desserts내 안에desserts다음과 같은 이름의 속성 설정이 있습니다.display처음엔 거짓이죠컴포넌트가 있습니다.Row이름을 붙여진 부모 컴포넌트 안에 Import하고 있습니다.Table.Row컴포넌트에는 몇 가지 소품을 사용할 수 있습니다. Name그리고.Display.그display소품은 에서 반환되는 것이다dessertsVuex 스토어에서요.변환을 추가하려고 합니다.아이콘 클릭 시Row컴포넌트,display.laptoptrue와 false로 전환할 수 있습니다.셋업이 완료되어 있습니다.toggleLaptopDisplay정의되지 않은 속성 노트북을 읽을 수 없습니다.

Code Sandbox 전체를 보세요.

다음은 완전한 코드입니다.

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>

Row 컴포넌트는 다음과 같습니다.

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

어떤 도움이라도 주시면 감사하겠습니다.감사합니다:)

원하는 것을 달성하기 위한 몇 가지 사항:

Row.vue에서 적절한 요소를 선택하는 방법을 추가합니다.

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

다음으로 메서드에서 요소의 이름을 payload로 전달하는 메서드를 만듭니다.

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

마지막으로 store.payload에서 payload를 사용하여 선택한 요소를 변환합니다.

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

편집된 예

언급URL : https://stackoverflow.com/questions/62542497/change-state-using-mutation-vuejs