Aska

Using Vue.js pinia instead of vuex

Pinia is the successor to Vuex, a state management library. It is currently an official project.

mutationsAbolished in Vuex, there is no such thing, dispatchand commitchanging the store simply calls the defined method. Similarly, reading from the store is simply accessing the property.

Since it is a simple implementation using the Composition function (composable) in the Composition API, the learning cost is lower than Vuex.

The differences from vuex so far are as follows

Full TypeScript support Abolition of mutations Abolition of nested modules Namespace abolition Code Spliting Pinia installation and configuration

npm install pinia

Install Pinia using createPinia ()

import { createApp } from "vue"; 
import { createPinia } from "pinia"; 
import App from "./App.vue"; 

createApp(App)
    .use(createPinia())
    .mount("#app");
Creating a store
Create a basic store

defineStoreDefine a store with defineStoreThe first argument is a key that is unique within the application defineStoreThe second argument of is the object that defines the store, stateand specifies gettersthe actionsthree properties of Unlike vuex, there are no mutations

// Import defineStore 
import  { defineStore }  from'pinia  '

// Define the store with defineStore` 
// The first argument is a unique key in the application 
export  const  useTestStore  =  defineStore ( 'test' ,  {

    // state-> Define the initial state of the store 
    state : ( )  =>  ( { 
        count : 0 , 
    } ) ,

    // getters-> getters to get the state (equivalent to computed) 
    getters : { doubleCount : ( state ) => state . Counter * 2 , } ,

    // actions-> actions to change the state (equivalent to methods 
    ) actions : { 
        increment ( ) 
        { 
            this . count ++ 
        } , 
        decrement ( ) 
        { 
            this . counter- } , 
        } } )

Instructions Partition assignment is possible while maintaining reactivity with storeToRefs Note that toRefs will break the reactivity. action can be called directly from the store object

<template>
    <div>
        <p>counter: {{counter}}</p>
        <p>doubleCount: {{doubleCount}}</p>
        <button type="button" @click="increment">increment</button>
        <!-- test.decrement()で直接呼び出しも可能 -->
        <button type="button" @click="test.decrement()">decrement</button>
    </div>
</template>

<script>
import {useTestStore} from '@/store/test'
import {storeToRefs} from 'pinia'

export  default { 
setup ()     { // Call store const test = useTestStore ()    

        // Get store property 
// Note that reactivity is broken if toRefs const { counter , doubleCount } = storeToRefs (test)        

        // Get store action 
const increment = () => { test . Increment ()        };          

        return {
            test,
            counter,
            doubleCount,
            increment,
        }
    },
}
</script>