Pinia\u662fVue3\u7684\u5b98\u65b9\u72b6\u6001\u7ba1\u7406\u5e93，\u5b83\u63d0\u4f9b\u4e86\u7b80\u5355\u3001\u76f4\u89c2\u7684\u72b6\u6001\u7ba1\u7406\u89e3\u51b3\u65b9\u6848，\u4e0eVue3\u7684Composition API\u5b8c\u7f8e\u96c6\u6210\u3002<\/p>\n
\/\/ stores\/counter.js
\nimport { defineStore } from 'pinia'
\nimport { ref, computed } from 'vue'<\/p>\n
export const useCounterStore = defineStore('counter', () => {
\n \/\/ \u72b6\u6001
\n const count = ref(0)
\n const name = ref('Counter Store')<\/p>\n
\/\/ \u8ba1\u7b97\u5c5e\u6027
\n const doubleCount = computed(() => count.value * 2)
\n const isEven = computed(() => count.value % 2 === 0)<\/p>\n
\/\/ \u65b9\u6cd5
\n function increment() {
\n count.value++
\n }<\/p>\n
function decrement() {
\n count.value–
\n }<\/p>\n
function reset() {
\n count.value = 0
\n }<\/p>\n
function setCount(value) {
\n count.value = value
\n }<\/p>\n
\/\/ \u5f02\u6b65\u65b9\u6cd5
\n async function incrementAsync() {
\n await new Promise(resolve => setTimeout(resolve, 1000))
\n count.value++
\n }<\/p>\n
return {
\n \/\/ \u72b6\u6001
\n count,
\n name,
\n \/\/ \u8ba1\u7b97\u5c5e\u6027
\n doubleCount,
\n isEven,
\n \/\/ \u65b9\u6cd5
\n increment,
\n decrement,
\n reset,
\n setCount,
\n incrementAsync
\n }
\n})<\/p>\n
<!– components\/CounterDemo.vue –>
\n<template>
\n <div class="counter-demo">
\n <h2>\u8ba1\u6570\u5668\u793a\u4f8b<\/h2><\/p>\n
<!– \u76f4\u63a5\u4f7f\u7528Store\u72b6\u6001 –>
\n <div class="counter-info">
\n <p>\u5f53\u524d\u8ba1\u6570：{{ counterStore.count }}<\/p>
\n <p>\u53cc\u500d\u8ba1\u6570：{{ counterStore.doubleCount }}<\/p>
\n <p>\u662f\u5426\u5076\u6570：{{ counterStore.isEven ? '\u662f' : '\u5426' }}<\/p>
\n <p>Store\u540d\u79f0：{{ counterStore.name }}<\/p>
\n <\/div><\/p>\n
<!– \u64cd\u4f5c\u6309\u94ae –>
\n <div class="counter-actions">
\n <button @click="counterStore.increment">+1<\/button>
\n <button @click="counterStore.decrement">-1<\/button>
\n <button @click="counterStore.reset">\u91cd\u7f6e<\/button>
\n <button @click="counterStore.incrementAsync" :disabled="loading">
\n {{ loading ? '\u52a0\u8f7d\u4e2d…' : '\u5f02\u6b65+1' }}
\n <\/button>
\n <\/div><\/p>\n
<!– \u81ea\u5b9a\u4e49\u8f93\u5165 –>
\n <div class="counter-input">
\n <input v-model.number="newValue" type="number" placeholder="\u8bbe\u7f6e\u65b0\u503c">
\n <button @click="setCustomValue">\u8bbe\u7f6e<\/button>
\n <\/div><\/p>\n
<!– \u7528\u6237Store\u793a\u4f8b –>
\n <div class="user-info" v-if="userStore.isAuthenticated">
\n <h3>\u7528\u6237\u4fe1\u606f<\/h3>
\n <p>\u7528\u6237\u540d：{{ userStore.userName }}<\/p>
\n <p>\u7528\u6237\u4fe1\u606f：{{ userStore.userInfo }}<\/p>
\n <p>\u662f\u5426\u6709\u7ba1\u7406\u6743\u9650：{{ userStore.hasPermission('admin') ? '\u662f' : '\u5426' }}<\/p>
\n <button @click="userStore.logout">\u767b\u51fa<\/button>
\n <\/div><\/p>\n
<div v-else class="login-form">
\n <h3>\u767b\u5f55<\/h3>
\n <input v-model="loginForm.username" placeholder="\u7528\u6237\u540d">
\n <input v-model="loginForm.password" type="password" placeholder="\u5bc6\u7801">
\n <button @click="handleLogin" :disabled="loginLoading">
\n {{ loginLoading ? '\u767b\u5f55\u4e2d…' : '\u767b\u5f55' }}
\n <\/button>
\n <\/div>
\n <\/div>
\n<\/template><\/p>\n
<script setup>
\nimport { ref, onMounted } from 'vue'
\nimport { useCounterStore } from '..\/stores\/counter'
\nimport { useUserStore } from '..\/stores\/user'<\/p>\n
\/\/ \u4f7f\u7528Store
\nconst counterStore = useCounterStore()
\nconst userStore = useUserStore()<\/p>\n
\/\/ \u672c\u5730\u72b6\u6001
\nconst newValue = ref(0)
\nconst loading = ref(false)
\nconst loginForm = ref({
\n username: '',
\n password: ''
\n})
\nconst loginLoading = ref(false)<\/p>\n
\/\/ \u8bbe\u7f6e\u81ea\u5b9a\u4e49\u503c
\nconst setCustomValue = () => {
\n counterStore.setCount(newValue.value)
\n}<\/p>\n
\/\/ \u5904\u7406\u767b\u5f55
\nconst handleLogin = async () => {
\n if (!loginForm.value.username || !loginForm.value.password) {
\n alert('\u8bf7\u8f93\u5165\u7528\u6237\u540d\u548c\u5bc6\u7801')
\n return
\n }<\/p>\n
loginLoading.value = true
\n try {
\n const result = await userStore.login(loginForm.value)
\n if (result.success) {
\n alert('\u767b\u5f55\u6210\u529f！')
\n loginForm.value = { username: '', password: '' }
\n } else {
\n alert(`\u767b\u5f55\u5931\u8d25：${result.error}`)
\n }
\n } finally {
\n loginLoading.value = false
\n }
\n}<\/p>\n
\/\/ \u7ec4\u4ef6\u6302\u8f7d\u65f6\u521d\u59cb\u5316\u7528\u6237\u72b6\u6001
\nonMounted(async () => {
\n await userStore.initUser()
\n})
\n<\/script><\/p>\n
<style scoped>
\n.counter-demo {
\n padding: 20px;
\n max-width: 600px;
\n margin: 0 auto;
\n}<\/p>\n
.counter-info {
\n background: #f8f9fa;
\n padding: 15px;
\n border-radius: 8px;
\n margin-bottom: 20px;
\n}<\/p>\n
.counter-actions {
\n display: flex;
\n gap: 10px;
\n margin-bottom: 20px;
\n}<\/p>\n
.counter-actions button {
\n padding: 10px 20px;
\n background: #007bff;
\n color: white;
\n border: none;
\n border-radius: 4px;
\n cursor: pointer;
\n}<\/p>\n
.counter-actions button:hover {
\n background: #0056b3;
\n}<\/p>\n
.counter-actions button:disabled {
\n background: #6c757d;
\n cursor: not-allowed;
\n}<\/p>\n
.counter-input {
\n display: flex;
\n gap: 10px;
\n margin-bottom: 20px;
\n}<\/p>\n
.counter-input input {
\n padding: 8px;
\n border: 1px solid #ddd;
\n border-radius: 4px;
\n flex: 1;
\n}<\/p>\n
.counter-input button {
\n padding: 8px 16px;
\n background: #28a745;
\n color: white;
\n border: none;
\n border-radius: 4px;
\n cursor: pointer;
\n}<\/p>\n
.user-info,
\n.login-form {
\n background: #e9ecef;
\n padding: 15px;
\n border-radius: 8px;
\n margin-top: 20px;
\n}<\/p>\n
.login-form input {
\n display: block;
\n width: 100%;
\n padding: 8px;
\n margin: 10px 0;
\n border: 1px solid #ddd;
\n border-radius: 4px;
\n}<\/p>\n
.login-form button {
\n width: 100%;
\n padding: 10px;
\n background: #007bff;
\n color: white;
\n border: none;
\n border-radius: 4px;
\n cursor: pointer;
\n}
\n<\/style><\/p>\n
\/\/ stores\/cart.js
\nimport { defineStore } from 'pinia'
\nimport { ref, computed } from 'vue'<\/p>\n
export const useCartStore = defineStore('cart', () => {
\n \/\/ \u72b6\u6001
\n const items = ref([])
\n const isLoading = ref(false)<\/p>\n
\/\/ \u8ba1\u7b97\u5c5e\u6027
\n const totalItems = computed(() => {
\n return items.value.reduce((total, item) => total + item.quantity, 0)
\n })<\/p>\n
const totalPrice = computed(() => {
\n return items.value.reduce((total, item) => total + item.price * item.quantity, 0)
\n })<\/p>\n
const isEmpty = computed(() => items.value.length === 0)<\/p>\n
const itemCount = computed(() => items.value.length)<\/p>\n
\/\/ \u65b9\u6cd5
\n function addItem(product, quantity = 1) {
\n const existingItem = items.value.find(item => item.id === product.id)<\/p>\n
if (existingItem) {
\n existingItem.quantity += quantity
\n } else {
\n items.value.push({
\n …product,
\n quantity
\n })
\n }
\n }<\/p>\n
function removeItem(productId) {
\n const index = items.value.findIndex(item => item.id === productId)
\n if (index > -1) {
\n items.value.splice(index, 1)
\n }
\n }<\/p>\n
function updateQuantity(productId, quantity) {
\n const item = items.value.find(item => item.id === productId)
\n if (item) {
\n if (quantity <= 0) {
\n removeItem(productId)
\n } else {
\n item.quantity = quantity
\n }
\n }
\n }<\/p>\n
function clearCart() {
\n items.value = []
\n }<\/p>\n
\/\/ \u5f02\u6b65\u65b9\u6cd5
\n async function checkout() {
\n if (isEmpty.value) {
\n throw new Error('\u8d2d\u7269\u8f66\u4e3a\u7a7a')
\n }<\/p>\n
isLoading.value = true
\n try {
\n \/\/ \u6a21\u62dfAPI\u8c03\u7528
\n await new Promise(resolve => setTimeout(resolve, 2000))<\/p>\n
\/\/ \u6e05\u7a7a\u8d2d\u7269\u8f66
\n clearCart()<\/p>\n
return { success: true, message: '\u8ba2\u5355\u63d0\u4ea4\u6210\u529f！' }
\n } catch (error) {
\n throw new Error('\u8ba2\u5355\u63d0\u4ea4\u5931\u8d25：' + error.message)
\n } finally {
\n isLoading.value = false
\n }
\n }<\/p>\n
\/\/ \u6301\u4e45\u5316
\n function saveToLocalStorage() {
\n localStorage.setItem('cart', JSON.stringify(items.value))
\n }<\/p>\n
function loadFromLocalStorage() {
\n const saved = localStorage.getItem('cart')
\n if (saved) {
\n items.value = JSON.parse(saved)
\n }
\n }<\/p>\n
return {
\n \/\/ \u72b6\u6001
\n items,
\n isLoading,
\n \/\/ \u8ba1\u7b97\u5c5e\u6027
\n totalItems,
\n totalPrice,
\n isEmpty,
\n itemCount,
\n \/\/ \u65b9\u6cd5
\n addItem,
\n removeItem,
\n updateQuantity,
\n clearCart,
\n checkout,
\n saveToLocalStorage,
\n loadFromLocalStorage
\n }
\n})<\/p>\n
\/\/ stores\/products.js
\nimport { defineStore } from 'pinia'
\nimport { ref, computed } from 'vue'<\/p>\n
export const useProductsStore = defineStore('products', () => {
\n \/\/ \u72b6\u6001
\n const products = ref([])
\n const categories = ref([])
\n const loading = ref(false)
\n const error = ref(null)
\n const filters = ref({
\n category: '',
\n search: '',
\n sortBy: 'name',
\n sortOrder: 'asc'
\n })<\/p>\n
\/\/ \u8ba1\u7b97\u5c5e\u6027
\n const filteredProducts = computed(() => {
\n let filtered = products.value<\/p>\n
\/\/ \u6309\u5206\u7c7b\u7b5b\u9009
\n if (filters.value.category) {
\n filtered = filtered.filter(product =>
\n product.category === filters.value.category
\n )
\n }<\/p>\n
\/\/ \u6309\u641c\u7d22\u8bcd\u7b5b\u9009
\n if (filters.value.search) {
\n const searchLower = filters.value.search.toLowerCase()
\n filtered = filtered.filter(product =>
\n product.name.toLowerCase().includes(searchLower) ||
\n product.description.toLowerCase().includes(searchLower)
\n )
\n }<\/p>\n
\/\/ \u6392\u5e8f
\n filtered.sort((a, b) => {
\n const aValue = a[filters.value.sortBy]
\n const bValue = b[filters.value.sortBy]<\/p>\n
if (filters.value.sortOrder === 'asc') {
\n return aValue > bValue ? 1 : -1
\n } else {
\n return aValue < bValue ? 1 : -1
\n }
\n })<\/p>\n
return filtered
\n })<\/p>\n
const availableCategories = computed(() => {
\n return […new Set(products.value.map(p => p.category))]
\n })<\/p>\n
\/\/ \u65b9\u6cd5
\n async function fetchProducts() {
\n loading.value = true
\n error.value = null<\/p>\n
try {
\n \/\/ \u6a21\u62dfAPI\u8c03\u7528
\n await new Promise(resolve => setTimeout(resolve, 1000))<\/p>\n
\/\/ \u6a21\u62df\u4ea7\u54c1\u6570\u636e
\n products.value = [
\n { id: 1, name: 'Vue3\u6559\u7a0b', price: 99, category: '\u6559\u80b2', description: 'Vue3\u5b8c\u6574\u5b66\u4e60\u6559\u7a0b' },
\n { id: 2, name: 'React\u6559\u7a0b', price: 88, category: '\u6559\u80b2', description: 'React\u5f00\u53d1\u6307\u5357' },
\n { id: 3, name: 'TypeScript\u6559\u7a0b', price: 77, category: '\u6559\u80b2', description: 'TypeScript\u5165\u95e8' },
\n { id: 4, name: 'Node.js\u6559\u7a0b', price: 66, category: '\u6559\u80b2', description: 'Node.js\u540e\u7aef\u5f00\u53d1' },
\n { id: 5, name: 'Python\u6559\u7a0b', price: 55, category: '\u6559\u80b2', description: 'Python\u7f16\u7a0b\u57fa\u7840' },
\n { id: 6, name: 'Java\u6559\u7a0b', price: 44, category: '\u6559\u80b2', description: 'Java\u4f01\u4e1a\u7ea7\u5f00\u53d1' }
\n ]
\n } catch (err) {
\n error.value = err.message
\n } finally {
\n loading.value = false
\n }
\n }<\/p>\n
function setFilter(key, value) {
\n filters.value[key] = value
\n }<\/p>\n
function clearFilters() {
\n filters.value = {
\n category: '',
\n search: '',
\n sortBy: 'name',
\n sortOrder: 'asc'
\n }
\n }<\/p>\n
function getProductById(id) {
\n return products.value.find(product => product.id === id)
\n }<\/p>\n
return {
\n \/\/ \u72b6\u6001
\n products,
\n categories,
\n loading,
\n error,
\n filters,
\n \/\/ \u8ba1\u7b97\u5c5e\u6027
\n filteredProducts,
\n availableCategories,
\n \/\/ \u65b9\u6cd5
\n fetchProducts,
\n setFilter,
\n clearFilters,
\n getProductById
\n }
\n})<\/p>\n
\u6587\u7ae0\u6d4f\u89c8\u9605\u8bfb93\u6b21\u3002Pinia\u662fVue3\u7684\u5b98\u65b9\u72b6\u6001\u7ba1\u7406\u5e93\uff0c\u5b83\u63d0\u4f9b\u4e86\u7b80\u5355\u3001\u76f4\u89c2\u7684\u72b6\u6001\u7ba1\u7406\u89e3\u51b3\u65b9\u6848\uff0c\u4e0eVue3\u7684Composition API\u5b8c\u7f8e\u96c6\u6210\u3002\/\/ \u72b6\u6001\/\/ \u8ba1\u7b97\u5c5e\u6027\/\/ \u65b9\u6cd5\/\/ \u5f02\u6b65\u65b9\u6cd5return {\/\/ \u72b6\u6001count,name,\/\/ \u8ba1\u7b97\u5c5e\u6027isEven,\/\/ \u65b9\u6cd5increment,decrement,reset,setCount,})<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[187,625,87],"topic":[],"class_list":["post-55188","post","type-post","status-publish","format-standard","hentry","category-server","tag-javascript","tag-vue-js","tag-87"],"yoast_head":"\n