Vue3使用pinia進行數(shù)據(jù)添加、修改和刪除的操作代碼
更新時間：2025年03月26日 10:42:32 作者：北辰alk
Pinia?是?Vue?3?的官方狀態(tài)管理庫,旨在提供一種簡單、靈活且類型安全的狀態(tài)管理解決方案,Pinia?的設(shè)計理念與?Vuex?類似,但更加輕量且易于使用,文旨在全面解析?Vue?3?中如何使用?Pinia?進行數(shù)據(jù)的添加、修改和刪除,需要的朋友可以參考下
1. 引言
Pinia 簡介
Pinia 是 Vue 3 的官方狀態(tài)管理庫，旨在提供一種簡單、靈活且類型安全的狀態(tài)管理解決方案。Pinia 的設(shè)計理念與 Vuex 類似，但更加輕量且易于使用。
Pinia 的優(yōu)勢與適用場景
- 輕量級：Pinia 的核心代碼非常精簡，適合中小型項目。
- 類型安全：Pinia 完全支持 TypeScript，提供更好的類型推斷和代碼提示。
- 靈活性：Pinia 允許開發(fā)者根據(jù)需要創(chuàng)建多個 Store，并且每個 Store 都是獨立的。
本文的目標(biāo)與結(jié)構(gòu)
本文旨在全面解析 Vue 3 中如何使用 Pinia 進行數(shù)據(jù)的添加、修改和刪除，并通過詳細的代碼示例幫助讀者掌握這些技巧。文章結(jié)構(gòu)如下：
- 介紹 Pinia 的基礎(chǔ)知識和配置。
- 探討如何在 Pinia 中添加、修改和刪除數(shù)據(jù)。
- 提供性能優(yōu)化建議和實戰(zhàn)案例。
2. Pinia 基礎(chǔ)
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');
創(chuàng)建與使用 Store
Store 是 Pinia 的核心概念，用于管理應(yīng)用的狀態(tài)。
示例代碼
// 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 中的狀態(tài)數(shù)據(jù)。
- Getters：用于從 State 中派生出新的數(shù)據(jù)。
- Actions：用于修改 State 或執(zhí)行異步操作。
3. 添加數(shù)據(jù)
在 Store 中添加數(shù)據(jù)
通過 State 和 Actions 在 Store 中添加數(shù)據(jù)。
示例代碼
// src/stores/user.js
import { defineStore } from 'pinia';
export const useUserStore = defineStore('user', {
state: () => ({
users: [],
}),
actions: {
addUser(user) {
this.users.push(user);
},
},
});
使用 Actions 添加數(shù)據(jù)
通過 Actions 封裝添加數(shù)據(jù)的邏輯。
示例代碼
<!-- 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>
示例：添加用戶數(shù)據(jù)
通過表單輸入用戶信息并添加到 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. 修改數(shù)據(jù)
在 Store 中修改數(shù)據(jù)
通過 State 和 Actions 在 Store 中修改數(shù)據(jù)。
示例代碼
// 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 修改數(shù)據(jù)
通過 Actions 封裝修改數(shù)據(jù)的邏輯。
示例代碼
<!-- 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>
示例：修改用戶數(shù)據(jù)
通過表單修改用戶信息并更新到 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. 刪除數(shù)據(jù)
在 Store 中刪除數(shù)據(jù)
通過 State 和 Actions 在 Store 中刪除數(shù)據(jù)。
示例代碼
// 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 刪除數(shù)據(jù)
通過 Actions 封裝刪除數(shù)據(jù)的邏輯。
示例代碼
<!-- 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>
示例：刪除用戶數(shù)據(jù)
通過按鈕刪除用戶信息并從 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 監(jiān)聽 State 變化
通過 watch 監(jiān)聽 State 的變化并執(zhí)行相應(yīng)邏輯。
示例代碼
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 }
);
},
};
示例：實現(xiàn)撤銷/重做功能
通過插件和 State 監(jiān)聽實現(xiàn)撤銷/重做功能。
示例代碼
// 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 的性能優(yōu)化
避免不必要的 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 優(yōu)化 Getters
通過 computed 緩存派生數(shù)據(jù)，避免重復(fù)計算。
示例代碼
// src/stores/user.js
import { defineStore } from 'pinia';
export const useUserStore = defineStore('user', {
state: () => ({
users: [],
}),
getters: {
activeUsers: (state) => state.users.filter(user => user.isActive),
},
});
示例：優(yōu)化數(shù)據(jù)操作性能
通過批量更新和緩存優(yōu)化數(shù)據(jù)操作性能。
示例代碼
// 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 的測試與調(diào)試
使用 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 調(diào)試 Pinia
通過 Vue Devtools 調(diào)試 Pinia Store 的狀態(tài)和操作。
示例代碼
// 在組件中使用 console.log 調(diào)試
export default {
setup() {
const userStore = useUserStore();
console.log('Users:', userStore.users);
},
};
9. 實戰(zhàn)案例
實現(xiàn)一個用戶管理系統(tǒng)
通過 Pinia 實現(xiàn)一個用戶管理系統(tǒng)，支持添加、修改和刪除用戶。
示例代碼
<!-- 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>
到此這篇關(guān)于Vue3使用pinnia進行數(shù)據(jù)添加、修改和刪除的操作代碼的文章就介紹到這了,更多相關(guān)Vue3 pinnia數(shù)據(jù)增刪改內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了Python實現(xiàn)學(xué)生成績管理系統(tǒng)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要介紹了nuxt引入組件和公共樣式的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue3.0引入百度地圖并標(biāo)記點的實現(xiàn)代碼
這篇文章主要介紹了vue3.0引入百度地圖并標(biāo)記點,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
antd Form組件方法getFieldsValue獲取自定義組件的值操作
這篇文章主要介紹了antd Form組件方法getFieldsValue獲取自定義組件的值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
一文帶你搞懂Vue中Provide/Inject的使用與高級應(yīng)用
這篇文章將詳細介紹如何在?Vue.js?中使用?provide?和?inject?模式,并探討其在實際應(yīng)用中的高級用法,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
本篇文章主要介紹了vue一步步實現(xiàn)alert功能，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
Vue?關(guān)于$emit與props的使用示例代碼
父組件使用 props 把數(shù)據(jù)傳給子組件，子組件使用 $emit 觸發(fā)父組件的自定義事件，今天通過示例給大家詳細介紹下Vue?關(guān)于$emit與props的使用，感興趣的朋友一起看看吧2022-03-03
Vue箭頭函數(shù)與普通函數(shù)的正確使用及說明
文章解析Vue項目中箭頭函數(shù)與普通函數(shù)的this指向差異,指出90%錯誤源于誤用函數(shù)類型,提供Vue2/3場景下的使用邊界指南,強調(diào)需根據(jù)是否需要訪問Vue實例數(shù)據(jù)選擇函數(shù)類型,并給出1個判斷標(biāo)準(zhǔn)幫助開發(fā)者避免this相關(guān)錯誤2025-09-09
Vue+ElementUi實現(xiàn)點擊表格中鏈接進行頁面跳轉(zhuǎn)與路由詳解
在vue中進行前端網(wǎng)頁開發(fā)時,通常列表數(shù)據(jù)用el-table展示,下面這篇文章主要給大家介紹了關(guān)于Vue+ElementUi實現(xiàn)點擊表格中鏈接進行頁面跳轉(zhuǎn)與路由的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了Vue組件之單向數(shù)據(jù)流的解決方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11