Vue3使用pinia進(jìn)行數(shù)據(jù)添加、修改和刪除的操作代碼
更新時(shí)間：2025年03月26日 10:42:32 作者：北辰alk
Pinia?是?Vue?3?的官方狀態(tài)管理庫(kù),旨在提供一種簡(jiǎn)單、靈活且類(lèi)型安全的狀態(tài)管理解決方案,Pinia?的設(shè)計(jì)理念與?Vuex?類(lèi)似,但更加輕量且易于使用,文旨在全面解析?Vue?3?中如何使用?Pinia?進(jìn)行數(shù)據(jù)的添加、修改和刪除,需要的朋友可以參考下
1. 引言
Pinia 簡(jiǎn)介
Pinia 是 Vue 3 的官方狀態(tài)管理庫(kù)，旨在提供一種簡(jiǎn)單、靈活且類(lèi)型安全的狀態(tài)管理解決方案。Pinia 的設(shè)計(jì)理念與 Vuex 類(lèi)似，但更加輕量且易于使用。
Pinia 的優(yōu)勢(shì)與適用場(chǎng)景
- 輕量級(jí)：Pinia 的核心代碼非常精簡(jiǎn)，適合中小型項(xiàng)目。
- 類(lèi)型安全：Pinia 完全支持 TypeScript，提供更好的類(lèi)型推斷和代碼提示。
- 靈活性：Pinia 允許開(kāi)發(fā)者根據(jù)需要?jiǎng)?chuàng)建多個(gè) Store，并且每個(gè) Store 都是獨(dú)立的。
本文的目標(biāo)與結(jié)構(gòu)
本文旨在全面解析 Vue 3 中如何使用 Pinia 進(jìn)行數(shù)據(jù)的添加、修改和刪除，并通過(guò)詳細(xì)的代碼示例幫助讀者掌握這些技巧。文章結(jié)構(gòu)如下：
- 介紹 Pinia 的基礎(chǔ)知識(shí)和配置。
- 探討如何在 Pinia 中添加、修改和刪除數(shù)據(jù)。
- 提供性能優(yōu)化建議和實(shí)戰(zhàn)案例。
2. Pinia 基礎(chǔ)
Pinia 的安裝與配置
Pinia 可以通過(guò) 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ù)
通過(guò) 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ù)
通過(guò) 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>
示例：添加用戶(hù)數(shù)據(jù)
通過(guò)表單輸入用戶(hù)信息并添加到 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ù)
通過(guò) 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ù)
通過(guò) 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>
示例：修改用戶(hù)數(shù)據(jù)
通過(guò)表單修改用戶(hù)信息并更新到 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ù)
通過(guò) 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ù)
通過(guò) 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>
示例：刪除用戶(hù)數(shù)據(jù)
通過(guò)按鈕刪除用戶(hù)信息并從 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 的高級(jí)用法
使用插件擴(kuò)展 Pinia
Pinia 支持通過(guò)插件擴(kuò)展功能，例如持久化存儲(chǔ)。
示例代碼
// 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)聽(tīng) State 變化
通過(guò) watch 監(jiān)聽(tīng) 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 }
);
},
};
示例：實(shí)現(xiàn)撤銷(xiāo)/重做功能
通過(guò)插件和 State 監(jiān)聽(tīng)實(shí)現(xiàn)撤銷(xiāo)/重做功能。
示例代碼
// 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 更新
通過(guò) $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
通過(guò) computed 緩存派生數(shù)據(jù)，避免重復(fù)計(jì)算。
示例代碼
// 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ù)操作性能
通過(guò)批量更新和緩存優(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 的測(cè)試與調(diào)試
使用 Vitest 測(cè)試 Pinia Store
通過(guò) Vitest 測(cè)試 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
通過(guò) Vue Devtools 調(diào)試 Pinia Store 的狀態(tài)和操作。
示例代碼
// 在組件中使用 console.log 調(diào)試
export default {
setup() {
const userStore = useUserStore();
console.log('Users:', userStore.users);
},
};
9. 實(shí)戰(zhàn)案例
實(shí)現(xiàn)一個(gè)用戶(hù)管理系統(tǒng)
通過(guò) Pinia 實(shí)現(xiàn)一個(gè)用戶(hù)管理系統(tǒng)，支持添加、修改和刪除用戶(hù)。
示例代碼
<!-- 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進(jìn)行數(shù)據(jù)添加、修改和刪除的操作代碼的文章就介紹到這了,更多相關(guān)Vue3 pinnia數(shù)據(jù)增刪改內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了Backbone前端框架核心及源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)分頁(yè)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了Vue 中如何正確引入第三方模塊的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要為大家介紹了派發(fā)器抽離vue2單組件中的大量邏輯技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
組件是Vue.js最強(qiáng)大的功能之一。組件可以擴(kuò)展HTML元素，封裝可重用的代碼。這篇文章主要介紹了VUE 中添加手機(jī)驗(yàn)證碼組件,需要的朋友可以參考下2017-12-12
Vue實(shí)現(xiàn)導(dǎo)出excel表格功能
這篇文章主要介紹了Vue實(shí)現(xiàn)導(dǎo)出excel表格的功能，在文章末尾給大家提到了vue中excel表格的導(dǎo)入和導(dǎo)出代碼,需要的朋友可以參考下2018-03-03
下面小編就為大家分享一篇vue實(shí)現(xiàn)提示保存后退出的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
three.js實(shí)現(xiàn)vr全景圖功能實(shí)例(vue)
去年全景圖在微博上很是火爆了一陣,正好我也做過(guò)一點(diǎn)全景相關(guān)的項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于three.js實(shí)現(xiàn)vr全景圖功能的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
Element實(shí)現(xiàn)表格分頁(yè)數(shù)據(jù)選擇+全選所有完善批量操作
這篇文章主要介紹了Element實(shí)現(xiàn)表格分頁(yè)數(shù)據(jù)選擇+全選所有完善批量操作，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
vue?長(zhǎng)列表數(shù)據(jù)刷新的實(shí)現(xiàn)及思考
這篇文章主要為大家介紹了vue?長(zhǎng)列表數(shù)據(jù)刷新的實(shí)現(xiàn)及思考，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04