pinia

Defining a Store

This feature allows you to define a new store with a unique identifier, state, and actions. The state is reactive and can be accessed and manipulated across components.

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++;
    }
  }
});

Accessing Store State in Components

This code demonstrates how to access and use the store state within a Vue component. The store's reactive state is used in the template, and actions can be called to update the state.

<template>
  <div>{{ counterStore.count }}</div>
  <button @click="counterStore.increment">Increment</button>
</template>

<script setup>
import { useCounterStore } from './stores/counter';

const counterStore = useCounterStore();
</script>

Persisting State

Pinia allows for easy integration with other libraries, such as VueUse, to persist state between page reloads using local storage or other methods.

import { defineStore } from 'pinia';
import { useLocalStorage } from '@vueuse/core';

export const useUserStore = defineStore('user', {
  state: () => ({
    name: useLocalStorage('user-name', '')
  })
});