Attribute patch in pinia store is working from one component, but not from another (Nuxt.js)

Question

I've those two components using Nuxt 3.

The setActive method in component 1 changes the state of activeColor, but the cancelEdit method in component 2 does not.

Any idea why this is the case?

Component 1

Here the setActive method changes activeColor:

<template>
  <div class="f-button" @click="addColor">+ Add Color</div>
  {{ activeColor }}
  <div class="f-colors">
    <Color v-for="color in colors" :color="color" :edit="activeColor === color" @click="setActive(color)"/>
  </div>
</template>

<script>
import {useProjectStore} from "~/stores/projects";
import {storeToRefs} from "pinia";
import Color from "~/components/Color.vue";
export default defineComponent({
  name: "ColorManagement",
  components: {Color},
  setup() {
    const projectStore = useProjectStore()
    const { getColors, getActiveColor } = storeToRefs(projectStore);
    return {
      projectStore,
      colors: getColors,
      activeColor: getActiveColor
    };
  },
  methods: {
    addColor() {
      ...
    },
    setActive(color) {
      this.projectStore.$patch({ activeColor: color })
    }
  }
});
</script>

Component 2

Here the cancelEdit method doesn't change activeColor:

  <div class="f-color">

    <div class="f-color__actions" v-if="edit">
      <div class="f-color__action" @click="cancelEdit">
        <Cancel /><span>Cancel</span>
      </div>
    </div>

  </div>

</template>

<script>
import Cancel from "~/components/icons/Cancel.vue";
import {useProjectStore} from "~/stores/projects";
import {storeToRefs} from "pinia";
export default defineComponent({
  name: "Color",
  components: {Cancel},
  props: ["color","edit"],
  setup() {
    const projectStore = useProjectStore()
    const { activeColor } = storeToRefs(projectStore);
    return {
      projectStore,
      activeColor
    };
  },
  methods: {
    cancelEdit() {
      this.projectStore.$patch({ activeColor: false })
    }
  }
});
</script>

nuxt.config.ts

export default defineNuxtConfig({
    vite: {
        css: {
            preprocessorOptions: {
                scss: {
                    additionalData: '@use "@/assets/styles/_styles.scss" as *;'
                }
            }
        }
    },
    modules: ['@pinia/nuxt']
})

Store

import { defineStore } from "pinia";

export const useProjectStore = defineStore({
  id: 'project',
  state: () => {
    return {
      project: {
        colors: [{ color: false, name: '' }]
      },
      activeColor: null
    }
  },
  getters: {
    getColors(state){
      return state.project.colors || [];
    },
    getActiveColor(state){
      return state.activeColor;
    }
  }
});

Are you getting any console.errors? I just replicated your code and it is working. — Arthur Borba
– Arthur Borba, Commented Feb 9, 2023 at 21:33
@ArthurBorba No errors in console. My expectation is, that "false" is displayed below "+ Add Color" in component 1 when I click "Cancel" in component 2. Instead it keeps showing the color object. — trrrnncy
– trrrnncy, Commented Feb 9, 2023 at 21:39

Arthur Borba · Accepted Answer · 2023-02-09 22:07:12Z

Ok, if I got this correctly, the deal is this:

Your so called Component 2 is the <Color ... component being used in Component 1, right?

When you trigger cancelEdit inside Component 2 (aka Color) you are also triggering the logic from setActive due to this <Color ...@click="setActive(color)"...so your activeColor is set to false (from the cancelEdit method) but right after it is set to active again, got it?

To fix this (if you don't want to change your HTML structure) you can use events stopPropagation method inside the cancelEdit:

cancelEdit(e) {
  e.stopPropagation()
  this.projectStore.$patch({ activeColor: false })
}

Event.stopPropagation() reference

Collectives™ on Stack Overflow

Attribute patch in pinia store is working from one component, but not from another (Nuxt.js)

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related