Pinia和Vuex都是Vue状态管理库，但是它们有一些区别。下面是一些区别和示例代码演示：
API风格
Pinia使用类似Vue组件的API来创建和使用store，而Vuex使用一个全局对象来访问store。这意味着Pinia更容易理解和使用，尤其是在大型应用程序中。
下面是一个使用Pinia的例子：
import {
defineStore } from 'pinia'
export const useCounterStore = defineStore({
id: 'counter',
state: () => ({
count: 0,
}),
actions: {
increment() {
this.count++
},
decrement() {
this.count--
},
},
})
在组件中使用：
import {
useCounterStore } from './store'
export default {
setup() {
const counterStore = useCounterStore()
return {
counterStore,
}
},
}
而在Vuex中，我们需要先定义store，然后在组件中通过mapState、mapGetters、mapActions、mapMutations等方式来访问store。
// store.js
import Vuex from 'vuex'
export default new Vuex.Store({
state: {
count: 0,
},
mutations: {
increment(state) {
state.count++
},
decrement(state) {
state.count--
},
},
actions: {
increment({
commit }) {
commit('increment')
},
decrement({
commit }) {
commit('decrement')
},
},
})
// 组件中使用
import {
mapState, mapActions } from 'vuex'
export default {
computed: mapState({
count: state => state.count,
}),
methods: mapActions(['increment', 'decrement']),
}
响应式
在Pinia中，状态是响应式的，这意味着当状态发生变化时，组件会自动更新。在Vuex中，我们需要手动触发更新。
例如，在vuex中，如果我们有一个increment mutation，可以使用commit方法来调用它：
this.$store.commit('increment')
模块化
Pinia的store是模块化的，这意味着每个store可以包含自己的状态、操作和插件。在Vuex中，store是全局的，这意味着所有的状态和操作都在同一个store中。
下面是一个完整的使用Pinia的计数器示例：
// store.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore({
id: 'counter',
state: () => ({
count: 0,
}),
actions: {
increment() {
this.count++
},
decrement() {
this.count--
},
},
})
// App.vue
<template>
<div>
<p>{
{ counterStore.count }}</p>
<button @click="counterStore.increment()">Increment</button>
<button @click="counterStore.decrement()">Decrement</button>
</div>
</template>
<script>
import {
useCounterStore } from './store'
export default {
setup() {
const counterStore = useCounterStore()
return {
counterStore,
}
},
}
</script>
以下是完整的使用Vuex的计数器示例：
// store.js
import Vuex from 'vuex'
export default new Vuex.Store({
state: {
count: 0,
},
mutations: {
increment(state) {
state.count++
},
decrement(state) {
state.count--
},
},
actions: {
increment({
commit }) {
commit('increment')
},
decrement({
commit }) {
commit('decrement')
},
},
})
// App.vue
<template>
<div>
<p>{
{
count }}</p>
<button @click="increment()">Increment</button>
<button @click="decrement()">Decrement</button>
</div>
</template>
<script>
import {
mapState, mapActions } from 'vuex'
export default {
computed: mapState({
count: state => state.count,
}),
methods: mapActions(['increment', 'decrement']),
}
</script>