Pinia 中文文档
一种前端实现不同组件之间共享状态数据的技术，可以调用异步函数访问服务器
坑：Pinia 的状态默认情况下是不会在浏览器刷新后保持的，因为它的状态是存储在内存中的，而不是持久化到本地存储或服务器端的。
当你刷新浏览器时，整个前端应用程序的状态都会被重置，包括 Pinia 的状态。这意味着你需要在应用程序重新加载时重新初始化 Pinia 的状态。
要在浏览器刷新后保持状态，可以考虑以下几种方法：
-
使用浏览器的本地存储或持久化库（如LocalStorage、SessionStorage或IndexedDB）将状态数据持久化保存在客户端，以便在刷新后重新加载。 -
在应用程序初始化时从服务器获取状态数据。这通常需要进行用户身份验证和服务器端存储。 -
使用服务端渲染（SSR）来保持状态。SSR 可以在服务器上生成初始 HTML，包括状态数据，以便在浏览器加载时立即可用。
一、Pinia是什么？有什么作用？
是什么？
Pinia 是一个用于状态管理的 Vue 3 应用程序的库。它是由 Vue.js 团队维护的，专门为 Vue 3 设计的状态管理解决方案。
有什么作用？
Pinia 的作用是帮助你管理应用程序的状态，使得状态在各个组件之间共享和维护更加容易。
什么是store?
“Store” 在上下文中通常指的是状态管理库中的一个概念，用于存储应用程序的数据状态。在 Vue.js 中，“store” 通常是指 Vuex，而在使用 Pinia 的情况下，它指的是 Pinia 的 store 对象，用于管理应用程序的状态。
在 Pinia 中，store 对象包括以下属性：
state：用于存储应用程序的状态数据。状态数据可以被组件访问和修改，但需要通过 mutations 来修改，以确保状态的一致性和可追踪性。
getters：用于定义获取state数据的标准函数。Getters 允许你在不修改状态的情况下从状态中获取数据。
actions：用于执行异步操作或一系列操作函数，可以修改状态数据。Actions 允许你在 store 中执行一些业务逻辑。
这些属性一起帮助你管理和操作状态数据，确保你的应用程序的数据状态在整个应用中保持一致。
二、Vue2使用Pinia步骤
1.首先，确保你的项目中已经安装了 Vue 2.x 和 Pinia。
npm install vue@2 pinia
然后，你可以按照以下步骤在 Vue 2 项目中使用 Pinia：
2.创建 Pinia Store：
在你的项目中创建一个 Pinia store文件夹，里面存放store.js：
import {
defineStore } from 'pinia';
export const useMyStore = defineStore({
id: 'myStore',
state: () => ({
count: 0,
}),
actions: {
increment() {
this.count++;
},
decrement() {
this.count--;
},
},
});
3.初始化 Pinia 并在 Vue 2 中注册：
在你的入口文件（通常是 main.js）中，初始化 Pinia 并将其注册到 Vue 2：
import Vue from 'vue';
import {
createPinia } from 'pinia';
import App from './App.vue';
Vue.config.productionTip = false;
const pinia = createPinia();
Vue.use(pinia)
new Vue({
render: (h) => h(App),
pinia, // 注册 Pinia
}).$mount('#app');
4.在 Vue 2 组件中使用 Pinia Store：
在你的 Vue 2 组件中，你可以使用 useStore 函数引入 Pinia store，并访问状态和操作：
<template>
<div>
<p>Count: {
{
count }}</p>
<button @click="increment">Increment</button>
<button @click="decrement">Decrement</button>
</div>
</template>
<script>
import {
useMyStore } from './store';
export default {
computed: {
count() {
return useMyStore().count;
},
},
methods: {
increment() {
useMyStore().increment();
},
decrement() {
useMyStore().decrement();
},
},
};
</script>
三、Vue3使用Pinia步骤
首先，确保你的项目中已经安装了 Vue 3 和 Pinia：
npm install vue@next pinia
// vue的下一个版本及最新版本
然后你就可以按照以下步骤在vue中使用Pinia
1.创建PiniaStore:
在你的项目中创建一个Pinia store文件夹，其下创建store.js:
import {
defineStore } from 'pinia';
export const useMyStore = defineStore({
id: 'myStore',
state: () => ({
count: 0,
}),
actions: {
increment() {
this.count++;
},
decrement() {
this.count--;
},
},
});
2.初始化 Pinia 并在 Vue 3 中注册：
在你的入口文件（通常是 main.js）中，初始化 Pinia 并将其注册到 Vue 3：
import {
createApp } from 'vue';
import {
createPinia } from 'pinia';
import App from './App.vue';
const app = createApp(App);
const pinia = createPinia();
app.use(pinia); // 注册 Pinia
app.mount('#app');
3.在 Vue 3 组件中使用 Pinia Store:
在你的 Vue 3 组件中，你可以使用 useStore 函数引入 Pinia store，并访问状态和操作：
<template>
<div>
<p>Count: {
{
count }}</p>
<button @click="increment">Increment</button>
<button @click="decrement">Decrement</button>
</div>
</template>
<script>
import {
useMyStore } from './store';
export default {
setup() {
const store = useMyStore();
return {
count: store.count,
increment: store.increment,
decrement: store.decrement,
};
},
};
</script>
setup() 函数：setup 函数是 Vue 3 中用于配置组件的入口函数，它在组件实例创建之前执行。这个函数可以返回一个包含响应式数据和方法的对象，这些数据和方法可以在组件的模板部分中使用。
return{ count: store.count, increment: store.increment, decrement: store.decrement }：在 setup 函数中，通过 return 语句返回一个对象，其中包含了组件需要在模板中使用的数据和方法。
count: store.count：这里将 store 对象中的 count 属性赋值给 count，使得组件可以在模板中访问并显示该状态。
increment: store.increment 和 decrement: store.decrement：这两行将 store 对象中的 increment 方法和 decrement 方法赋值给 increment 和 decrement，以便在模板中触发这些操作。
总结
这样，你就可以在 Vue 2 或Vue3项目中使用 Pinia 进行状态管理。请注意，Vue 2 和 Vue 3 的生命周期和一些语法细节可能有所不同，需要根据你的项目进行适当的调整。
最好的方式是在新项目中直接使用 Vue 3 和 Pinia，以充分利用 Pinia 的特性和性能优势。