Pinia在vue3中的使用
一、安装和初始化Pinia
首先，你需要通过npm或yarn安装Pinia：
npm install pinia
yarn add pinia
安装完成后，你需要在Vue应用的入口文件中初始化Pinia。通常，这会在main.js或main.ts文件中完成：
import { createApp } from 'vue';import { createPinia } from 'pinia';import App from './App.vue';const app = createApp(App);const pinia = createPinia();app.use(pinia);app.mount('#app');二、创建Store
在Pinia中，状态被封装在“store”中。你可以通过定义store来组织和管理应用的状态。创建store通常涉及以下几个步骤：
定义state：state是store的数据部分，它包含了应用的状态。
定义getters：getters类似于Vue组件中的computed属性，它们基于state计算值。
定义actions：actions是store的方法部分，它们可以包含任何同步或异步逻辑来修改state。
下面是一个简单的例子，展示了如何创建一个store来管理一个计数器：
// stores/counter.js 或 stores/counter.tsimport { defineStore } from 'pinia';export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, }), getters: { doubleCount: (state) => state.count * 2, }, actions: { increment() { this.count++; }, decrement() { this.count--; }, },});三、在组件中使用Store
一旦store被定义，你就可以在任何Vue组件中使用它了。你可以通过调用useCounterStore函数来访问store中定义的状态和动作。下面是一个在组件中使用store的例子：
<template> <div> <p>Count: {{ counter.count }}</p> <p>Double Count: {{ counter.doubleCount }}</p> <button @click="increment">Increment</button> <button @click="decrement">Decrement</button> </div></template><script setup>import { useCounterStore } from './stores/counter';const counter = useCounterStore();const increment = () => { counter.increment();};const decrement = () => { counter.decrement();};</script>在这个例子中，我们通过useCounterStore函数访问了计数器store，并在模板中绑定了它的状态和动作。当用户点击按钮时，将调用相应的动作来修改state。
四、修改state的多种方法
在Pinia中，你可以通过多种方式来修改state：
直接修改：虽然不推荐，但你可以直接修改state的属性。不过，这样做可能会失去响应性。
使用
$patch方法：$patch方法提供了一种更安全的修改state的方式。你可以传递一个对象或一个函数来更新state。使用actions：在actions中修改state是最推荐的方式，因为它保持了响应性，并且可以将修改逻辑封装在方法中。