山东住房城乡建设厅网站网站架构招聘

安装 Pinia

首先，你需要安装 Pinia。可以通过 npm 或 yarn 来进行安装：

npm install pinia
yarn add pinia

创建 Pinia 实例

在你的 Vue 应用程序中创建 Pinia 实例，并将其传递给 Vue 应用。通常在 main.js 或 main.ts 文件中进行：

// main.js
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 来管理相关状态。下面是一个简单的示例：

// stores/counter.js
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，你可以在任何组件中使用它。下面是如何在组件中使用 useCounterStore 的示例：

<template><div><h1>{{ count }}</h1><h2>{{ doubleCount }}</h2><button @click="increment">Increment</button><button @click="decrement">Decrement</button></div>
</template><script>
import { useCounterStore } from '@/stores/counter';export default {setup() {const counterStore = useCounterStore();return {count: counterStore.count,doubleCount: counterStore.doubleCount,increment: counterStore.increment,decrement: counterStore.decrement,};},
};
</script>

pinia 增删改查

// stores/taskStore.js
import { defineStore } from 'pinia';export const useTaskStore = defineStore('task', {state: () => ({tasks: [],}),actions: {addTask(task) {this.tasks.push(task);},removeTask(taskId) {this.tasks = this.tasks.filter(task => task.id !== taskId);},updateTask(updatedTask) {const index = this.tasks.findIndex(task => task.id === updatedTask.id);if (index !== -1) {this.tasks[index] = updatedTask;}},getTask(taskId) {return this.tasks.find(task => task.id === taskId);},},
});

在组件中使用

<template><div><h1>任务管理</h1><input v-model="newTask" placeholder="新任务名称" /><button @click="addNewTask">添加任务</button><ul><li v-for="task in taskStore.tasks" :key="task.id">{{ task.name }}<button @click="removeTask(task.id)">删除</button><button @click="updateTask(task)">更新</button></li></ul></div>
</template><script>
import { ref } from 'vue';
import { useTaskStore } from '../stores/taskStore';export default {setup() {const taskStore = useTaskStore();const newTask = ref('');const addNewTask = () => {if (newTask.value.trim()) {taskStore.addTask({ id: Date.now(), name: newTask.value });newTask.value = ''; // 清空输入框}};const removeTask = (taskId) => {taskStore.removeTask(taskId);};const updateTask = (task) => {const updatedName = prompt('更新任务名称:', task.name);if (updatedName !== null) {taskStore.updateTask({ ...task, name: updatedName });}};return { taskStore, newTask, addNewTask, removeTask, updateTask };},
};
</script>

响应式和插件

Pinia 的状态是响应式的，因此当你更新状态时，任何依赖于该状态的组件都会自动重新渲染。

同时，你也可以为 Pinia 添加插件来实现诸如持久化状态、日志等功能。例如，如果你想要持久化状态，可以使用 pinia-plugin-persistedstate 插件。

1. 安装插件

首先，你需要在项目中安装 pinia-plugin-persistedstate。可以使用 npm 或 yarn 进行安装

# 使用 npm 安装
npm install pinia-plugin-persistedstate# 使用 yarn 安装
yarn add pinia-plugin-persistedstate

2. 配置 Pinia 插件

在创建 Pinia 实例时，需要将 pinia-plugin-persistedstate 作为插件添加进去。以下是一个示例代码：

// main.js 或 main.ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
import App from './App.vue';// 创建 Pinia 实例
const pinia = createPinia();
// 使用持久化插件
pinia.use(piniaPluginPersistedstate);const app = createApp(App);
// 将 Pinia 实例挂载到应用中
app.use(pinia);
app.mount('#app');

3. 在 Store 中启用持久化

在定义 Pinia store 时，可以通过 persist 选项来启用持久化。以下是一个简单的 store 示例：

// store/counter.js 或 store/counter.ts
import { defineStore } from 'pinia';export const useCounterStore = defineStore('counter', {state: () => ({count: 0}),actions: {increment() {this.count++;}},// 启用持久化persist: true
});

4. 自定义持久化配置

你还可以对持久化进行更详细的配置，例如指定存储方式（localStorage 或 sessionStorage）、存储的键名等。以下是一个自定义配置的示例：

// store/counter.js 或 store/counter.ts
import { defineStore } from 'pinia';export const useCounterStore = defineStore('counter', {state: () => ({count: 0}),actions: {increment() {this.count++;}},persist: {// 存储方式，默认为 localStoragestorage: localStorage, // 存储的键名，默认为 store 的 idkey: 'my-counter-store', // 只持久化指定的状态paths: ['count'] }
});

在上述示例中，通过 storage 选项指定了存储方式为 localStorage，通过 key 选项指定了存储的键名，通过 paths 选项指定了只持久化 count 状态。