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.ts
import { 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是最推荐的方式，因为它保持了响应性，并且可以将修改逻辑封装在方法中。
