首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3 pinia数据增删改

Vue3使用pinia进行数据添加、修改和删除的操作代码

2025-03-26 10:38:14 作者：北辰alk

Pinia 是 Vue 3 的官方状态管理库,旨在提供一种简单、灵活且类型安全的状态管理解决方案,Pinia 的设计理念与 Vuex 类似,但更加轻量且易于使用,文旨在全面解析 Vue 3 中如何使用 Pinia 进行数据的添加、修改和删除,需要的朋友可以参考下

1. 引言

Pinia 简介

Pinia 是 Vue 3 的官方状态管理库，旨在提供一种简单、灵活且类型安全的状态管理解决方案。Pinia 的设计理念与 Vuex 类似，但更加轻量且易于使用。

Pinia 的优势与适用场景

轻量级：Pinia 的核心代码非常精简，适合中小型项目。
类型安全：Pinia 完全支持 TypeScript，提供更好的类型推断和代码提示。
灵活性：Pinia 允许开发者根据需要创建多个 Store，并且每个 Store 都是独立的。

本文的目标与结构

本文旨在全面解析 Vue 3 中如何使用 Pinia 进行数据的添加、修改和删除，并通过详细的代码示例帮助读者掌握这些技巧。文章结构如下：

介绍 Pinia 的基础知识和配置。
探讨如何在 Pinia 中添加、修改和删除数据。
提供性能优化建议和实战案例。

2. Pinia 基础

Pinia 的安装与配置

Pinia 可以通过 npm 或 yarn 安装。

安装 Pinia

npm install pinia

配置 Pinia

// src/main.js
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const app = createApp(App);
app.use(createPinia());
app.mount('#app');

创建与使用 Store

Store 是 Pinia 的核心概念，用于管理应用的状态。

示例代码

// src/stores/counter.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
  },
});

在组件中使用 Store

<!-- src/components/Counter.vue -->
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { useCounterStore } from '@/stores/counter';

export default {
  setup() {
    const counterStore = useCounterStore();
    return {
      count: counterStore.count,
      increment: counterStore.increment,
    };
  },
};
</script>

State、Getters 和 Actions 的概念

State：Store 中的状态数据。
Getters：用于从 State 中派生出新的数据。
Actions：用于修改 State 或执行异步操作。

3. 添加数据

在 Store 中添加数据

通过 State 和 Actions 在 Store 中添加数据。

示例代码

// src/stores/user.js
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    users: [],
  }),
  actions: {
    addUser(user) {
      this.users.push(user);
    },
  },
});

使用 Actions 添加数据

通过 Actions 封装添加数据的逻辑。

示例代码

<!-- src/components/AddUser.vue -->
<template>
  <div>
    <input v-model="name" placeholder="Name" />
    <input v-model="email" placeholder="Email" />
    <button @click="addUser">Add User</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useUserStore } from '@/stores/user';

export default {
  setup() {
    const name = ref('');
    const email = ref('');
    const userStore = useUserStore();

    const addUser = () => {
      if (name.value && email.value) {
        userStore.addUser({ name: name.value, email: email.value });
        name.value = '';
        email.value = '';
      }
    };

    return {
      name,
      email,
      addUser,
    };
  },
};
</script>

示例：添加用户数据

通过表单输入用户信息并添加到 Store 中。

示例代码

<!-- src/components/UserList.vue -->
<template>
  <div>
    <AddUser />
    <ul>
      <li v-for="user in users" :key="user.email">{{ user.name }} - {{ user.email }}</li>
    </ul>
  </div>
</template>

<script>
import { useUserStore } from '@/stores/user';
import AddUser from './AddUser.vue';

export default {
  components: {
    AddUser,
  },
  setup() {
    const userStore = useUserStore();
    return {
      users: userStore.users,
    };
  },
};
</script>

4. 修改数据

在 Store 中修改数据

通过 State 和 Actions 在 Store 中修改数据。

示例代码

// src/stores/user.js
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    users: [],
  }),
  actions: {
    updateUser(email, newData) {
      const user = this.users.find(user => user.email === email);
      if (user) {
        Object.assign(user, newData);
      }
    },
  },
});

使用 Actions 修改数据

通过 Actions 封装修改数据的逻辑。

示例代码

<!-- src/components/EditUser.vue -->
<template>
  <div>
    <input v-model="name" placeholder="Name" />
    <input v-model="email" placeholder="Email" />
    <button @click="updateUser">Update User</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useUserStore } from '@/stores/user';

export default {
  setup() {
    const name = ref('');
    const email = ref('');
    const userStore = useUserStore();

    const updateUser = () => {
      if (name.value && email.value) {
        userStore.updateUser(email.value, { name: name.value });
        name.value = '';
        email.value = '';
      }
    };

    return {
      name,
      email,
      updateUser,
    };
  },
};
</script>

示例：修改用户数据

通过表单修改用户信息并更新到 Store 中。

示例代码

<!-- src/components/UserList.vue -->
<template>
  <div>
    <AddUser />
    <EditUser />
    <ul>
      <li v-for="user in users" :key="user.email">{{ user.name }} - {{ user.email }}</li>
    </ul>
  </div>
</template>

<script>
import { useUserStore } from '@/stores/user';
import AddUser from './AddUser.vue';
import EditUser from './EditUser.vue';

export default {
  components: {
    AddUser,
    EditUser,
  },
  setup() {
    const userStore = useUserStore();
    return {
      users: userStore.users,
    };
  },
};
</script>

5. 删除数据

在 Store 中删除数据

通过 State 和 Actions 在 Store 中删除数据。

示例代码

// src/stores/user.js
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    users: [],
  }),
  actions: {
    deleteUser(email) {
      this.users = this.users.filter(user => user.email !== email);
    },
  },
});

使用 Actions 删除数据

通过 Actions 封装删除数据的逻辑。

示例代码

<!-- src/components/UserList.vue -->
<template>
  <div>
    <AddUser />
    <EditUser />
    <ul>
      <li v-for="user in users" :key="user.email">
        {{ user.name }} - {{ user.email }}
        <button @click="deleteUser(user.email)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { useUserStore } from '@/stores/user';
import AddUser from './AddUser.vue';
import EditUser from './EditUser.vue';

export default {
  components: {
    AddUser,
    EditUser,
  },
  setup() {
    const userStore = useUserStore();

    const deleteUser = (email) => {
      userStore.deleteUser(email);
    };

    return {
      users: userStore.users,
      deleteUser,
    };
  },
};
</script>

示例：删除用户数据

通过按钮删除用户信息并从 Store 中移除。

示例代码

<!-- src/components/UserList.vue -->
<template>
  <div>
    <AddUser />
    <EditUser />
    <ul>
      <li v-for="user in users" :key="user.email">
        {{ user.name }} - {{ user.email }}
        <button @click="deleteUser(user.email)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { useUserStore } from '@/stores/user';
import AddUser from './AddUser.vue';
import EditUser from './EditUser.vue';

export default {
  components: {
    AddUser,
    EditUser,
  },
  setup() {
    const userStore = useUserStore();

    const deleteUser = (email) => {
      userStore.deleteUser(email);
    };

    return {
      users: userStore.users,
      deleteUser,
    };
  },
};
</script>

6. Pinia 的高级用法

使用插件扩展 Pinia

Pinia 支持通过插件扩展功能，例如持久化存储。

示例代码

// src/plugins/piniaPlugin.js
export function piniaPlugin(context) {
  const store = context.store;
  store.$subscribe((mutation, state) => {
    localStorage.setItem(store.$id, JSON.stringify(state));
  });

  const savedState = localStorage.getItem(store.$id);
  if (savedState) {
    store.$patch(JSON.parse(savedState));
  }
}

// src/main.js
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
import { piniaPlugin } from './plugins/piniaPlugin';

const pinia = createPinia();
pinia.use(piniaPlugin);

const app = createApp(App);
app.use(pinia);
app.mount('#app');

使用 watch 监听 State 变化

通过 watch 监听 State 的变化并执行相应逻辑。

示例代码

import { watch } from 'vue';
import { useUserStore } from '@/stores/user';

export default {
  setup() {
    const userStore = useUserStore();

    watch(
      () => userStore.users,
      (newUsers) => {
        console.log('Users updated:', newUsers);
      },
      { deep: true }
    );
  },
};

示例：实现撤销/重做功能

通过插件和 State 监听实现撤销/重做功能。

示例代码

// src/plugins/undoRedoPlugin.js
export function undoRedoPlugin(context) {
  const store = context.store;
  const history = [];
  let future = [];

  store.$subscribe((mutation, state) => {
    history.push(JSON.parse(JSON.stringify(state)));
    future = [];
  });

  store.undo = () => {
    if (history.length > 1) {
      future.push(history.pop());
      store.$patch(history[history.length - 1]);
    }
  };

  store.redo = () => {
    if (future.length > 0) {
      const nextState = future.pop();
      history.push(nextState);
      store.$patch(nextState);
    }
  };
}

// src/main.js
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
import { undoRedoPlugin } from './plugins/undoRedoPlugin';

const pinia = createPinia();
pinia.use(undoRedoPlugin);

const app = createApp(App);
app.use(pinia);
app.mount('#app');

7. Pinia 的性能优化

避免不必要的 State 更新

通过 $patch 批量更新 State，避免不必要的渲染。

示例代码

// src/stores/user.js
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    users: [],
  }),
  actions: {
    addMultipleUsers(users) {
      this.$patch((state) => {
        state.users.push(...users);
      });
    },
  },
});

使用 computed 优化 Getters

通过 computed 缓存派生数据，避免重复计算。

示例代码

// src/stores/user.js
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    users: [],
  }),
  getters: {
    activeUsers: (state) => state.users.filter(user => user.isActive),
  },
});

示例：优化数据操作性能

通过批量更新和缓存优化数据操作性能。

示例代码

// src/stores/user.js
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    users: [],
  }),
  actions: {
    addMultipleUsers(users) {
      this.$patch((state) => {
        state.users.push(...users);
      });
    },
  },
  getters: {
    activeUsers: (state) => state.users.filter(user => user.isActive),
  },
});

8. Pinia 的测试与调试

使用 Vitest 测试 Pinia Store

通过 Vitest 测试 Pinia Store 的功能。

示例代码

// tests/stores/user.spec.js
import { setActivePinia, createPinia } from 'pinia';
import { useUserStore } from '@/stores/user';

describe('User Store', () => {
  beforeEach(() => {
    setActivePinia(createPinia());
  });

  test('addUser adds a user to the store', () => {
    const userStore = useUserStore();
    userStore.addUser({ name: 'John', email: 'john@example.com' });
    expect(userStore.users).toHaveLength(1);
  });
});

使用 Vue Devtools 调试 Pinia

通过 Vue Devtools 调试 Pinia Store 的状态和操作。

示例代码

// 在组件中使用 console.log 调试
export default {
  setup() {
    const userStore = useUserStore();
    console.log('Users:', userStore.users);
  },
};

9. 实战案例

实现一个用户管理系统

通过 Pinia 实现一个用户管理系统，支持添加、修改和删除用户。

示例代码

<!-- src/components/UserManagement.vue -->
<template>
  <div>
    <AddUser />
    <EditUser />
    <UserList />
  </div>
</template>

<script>
import AddUser from './AddUser.vue';
import EditUser from './EditUser.vue';
import UserList from './UserList.vue';

export default {
  components: {
    AddUser,
    EditUser,
    UserList,
  },
};
</script>

到此这篇关于Vue3使用pinnia进行数据添加、修改和删除的操作代码的文章就介绍到这了,更多相关Vue3 pinnia数据增删改内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

Vue3使用pinia进行数据添加、修改和删除的操作代码

1. 引言

Pinia 简介

Pinia 的优势与适用场景

本文的目标与结构

2. Pinia 基础

Pinia 的安装与配置

安装 Pinia

配置 Pinia

创建与使用 Store

在组件中使用 Store

State、Getters 和 Actions 的概念

3. 添加数据

在 Store 中添加数据

使用 Actions 添加数据

示例：添加用户数据

4. 修改数据

在 Store 中修改数据

使用 Actions 修改数据

示例：修改用户数据

5. 删除数据

在 Store 中删除数据

使用 Actions 删除数据

示例：删除用户数据

6. Pinia 的高级用法

使用插件扩展 Pinia

使用 watch 监听 State 变化

示例：实现撤销/重做功能

7. Pinia 的性能优化

避免不必要的 State 更新

使用 computed 优化 Getters

示例：优化数据操作性能

8. Pinia 的测试与调试

使用 Vitest 测试 Pinia Store

使用 Vue Devtools 调试 Pinia

9. 实战案例

实现一个用户管理系统

您可能感兴趣的文章: