面试官：Pinia和vuex在使用上有什么区别
2023-04-12
文章目录
- API风格
- 响应式
- 模块化
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
{{ counterStore.count }}
以下是完整的使用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
{{ count }}
本文仅代表作者观点，版权归原创者所有，如需转载请在文中注明来源及作者名字。
免责声明：本文系转载编辑文章，仅作分享之用。如分享内容、图片侵犯到您的版权或非授权发布，请及时与我们联系进行审核处理或删除，您可以发送材料至邮箱：service@tojoy.com