Nuxt•7mo ago

Pinia store not making actions

Hi, i'm builing a online store with shopping cart managment. To do so i decided to implement a pinia store to handle the custoimer cart for example The problem is that my actions are never making change to the state and i don't understand why Here is the code of the store

<script>
import { defineStore } from 'pinia'
import type { AccessoryPurchaseInfo, ShoppingCart } from '~/types'
export const useShoppingStore = defineStore('shop', {
  state: () => ({
      cart: {
          accessories: [],
          brasero_computed_price: 0,
          brasero: {}
      } as ShoppingCart
  }),
      totalPrice(state) {
          let accessoriesPrice = 0
          for (const accessory of state.cart.accessories) {
              accessoriesPrice = accessoriesPrice + accessory.displayed_price
          }
          return accessoriesPrice + state.cart.brasero_computed_price
      }
  },
  actions: {
      addAccessory(accessory: AccessoryPurchaseInfo) {

          console.log(accessory, 'from index')
          console.log(this.cart)
          this.cart.accessories.push(accessory)
      }
  },
})

<script>
import { defineStore } from 'pinia'
import type { AccessoryPurchaseInfo, ShoppingCart } from '~/types'
export const useShoppingStore = defineStore('shop', {
  state: () => ({
      cart: {
          accessories: [],
          brasero_computed_price: 0,
          brasero: {}
      } as ShoppingCart
  }),
      totalPrice(state) {
          let accessoriesPrice = 0
          for (const accessory of state.cart.accessories) {
              accessoriesPrice = accessoriesPrice + accessory.displayed_price
          }
          return accessoriesPrice + state.cart.brasero_computed_price
      }
  },
  actions: {
      addAccessory(accessory: AccessoryPurchaseInfo) {

          console.log(accessory, 'from index')
          console.log(this.cart)
          this.cart.accessories.push(accessory)
      }
  },
})

Then in my component i call the addAccessory method, but nothing happen in the state,

<script setup lang="ts">
import { useShoppingStore } from '~/store'
import { storeToRefs } from 'pinia'

import type { Accessory, AccessoryPurchaseInfo } from '~/types'

const storeShop = useShoppingStore()
const {addAccessory} = storeShop

const {data: accessories} = await useFetch<Accessory[]>('/api/accessories')

const addAccessoryToCart = (accessory: Accessory) => {
  const accessoryToAdd: AccessoryPurchaseInfo = {
    id: accessory.id,
    name: accessory.name,
    quantity: 1,
    displayed_price: accessory.unit_price,
  }
  console.log(accessoryToAdd)
  addAccessory(accessoryToAdd)
}

</script>

<script setup lang="ts">
import { useShoppingStore } from '~/store'
import { storeToRefs } from 'pinia'

import type { Accessory, AccessoryPurchaseInfo } from '~/types'

const storeShop = useShoppingStore()
const {addAccessory} = storeShop

const {data: accessories} = await useFetch<Accessory[]>('/api/accessories')

const addAccessoryToCart = (accessory: Accessory) => {
  const accessoryToAdd: AccessoryPurchaseInfo = {
    id: accessory.id,
    name: accessory.name,
    quantity: 1,
    displayed_price: accessory.unit_price,
  }
  console.log(accessoryToAdd)
  addAccessory(accessoryToAdd)
}

</script>

I have no error, but this --> internal server error /node_modules/tailwindcss/tailwind.css?direct:12335:20 I shouldn't be related but.. Hope it's pretty clear !

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Pinia store not making actions