1.main.js导入使用store
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
createApp(App).use(store).mount('#app')
vuex的使用方法,actions是异步
// 导入自己写的vuex
import { createStore } from '../vuex/index.js'
export default createStore({
state: {
count: 0,
},
mutations: {
plus(state, num) {
state.count += num
},
},
actions: {
plus({ commit }, num) {
setTimeout(() => {
commit('plus', num)
}, 1000)
},
},
})
vuex/index.js
import { inject, reactive } from 'vue'
class Store {
constructor(state, mutations, actions) {
this.state = state
this.mutations = mutations
this.actions = actions
}
install(app) {
const store = {}
store.state = reactive(this.state)
store.commit = (mutaitionName, payload) => {
this.mutations[mutaitionName](store.state, payload)
}
store.dispatch = (mutaitionName, payload) => {
this.actions[mutaitionName](
{ commit: store.commit, state: store.state },
payload
)
}
console.log('store', store)
// 将其store暴露出去
app.provide('store', store)
}
}
export function createStore({ state, mutations, actions }) {
return new Store(state, mutations, actions)
}
// 暴露useStore给组件使用
export function useStore() {
const store = inject('store')
return store
}
组件使用
<template>
<div>
<h1>{{ store.state.count }}</h1>
<button @click="mutationPlus(1)">mutationPlus</button>
<button @click="actionsPlus(2)">actionsPlus</button>
</div>
</template>
<script setup>
import { useStore } from '../vuex/index.js'
const store = useStore()
const mutationPlus=(num)=>{
store.commit('plus',num)
}
const actionsPlus=(num)=>{
store.dispatch('plus',num)
}
</script>
Pina和Vuex都是用于状态管理的库,但它们有一些区别:
- 数据流处理:在Vuex中,数据流是单向的,即从组件到store,再到组件。而在Pina中,数据流可以是双向的,即组件可以直接修改store的状态。
- API设计:Pina的API更加简单和直观,它采用了函数式编程的思想和API,使得状态管理更加清晰和可维护。而Vuex的API有些冗长,在使用时需要写很多代码。
- 响应式处理:在Pina中,使用的是Vue.js 3中的响应式处理机制,具有更高的性能和更好的类型支持。而在Vuex中,响应式处理是使用的Vue.js 2中的响应式处理机制,具有一些限制。
- 异步处理:在Pina中,异步逻辑可以通过使用"thunk"或"effect"来处理。而在Vuex中,使用的是action来处理异步逻辑。
- 模块化处理:在Pina中,模块化处理更加简单和灵活,每个模块都可以创建自己的store实例。而在Vuex中,模块化处理需要使用module机制,每个module都需要在全局的store中进行注册。
总的来说,Pina更加简单、直观和灵活,适用于小型应用程序的状态管理。而Vuex更适用于大型应用程序的状态管理,它提供了更多的功能和更好的文档和社区支持。选择使用哪个库取决于具体的项目需求和开发者的个人喜好。