Article directory
Both Pinia and Vuex are Vue state management libraries, but they have some differences. Here are some differences and sample code demonstrating:
API style
Pinia uses a Vue component-like API to create and use the store, while Vuex uses a global object to access the store. This means Pinia is easier to understand and use, especially in larger applications.
Here is an example using Pinia:
import {
defineStore } from 'pinia'
export const useCounterStore = defineStore({
id: 'counter',
state: () => ({
count: 0,
}),
actions: {
increment() {
this.count++
},
decrement() {
this.count--
},
},
})
In the component use:
import {
useCounterStore } from './store'
export default {
setup() {
const counterStore = useCounterStore()
return {
counterStore,
}
},
}
In Vuex, we need to define the store first, and then access the store through mapState, mapGetters, mapActions, mapMutations, etc. in the component.
// 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']),
}
Responsive
In Pinia, the state is reactive, which means that when the state changes, the components are automatically updated. In Vuex, we need to trigger updates manually.
For example, in vuex, if we have an increment mutation, we can use the commit method to call it:
this.$store.commit('increment')
Modular
Pinia's stores are modular, meaning each store can contain its own state, actions, and plugins. In Vuex, stores are global, which means that all state and operations are in the same store.
Here is a complete counter example using 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>
Here is the full counter example using 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>