手写vueX

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都是用于状态管理的库，但它们有一些区别：

1. 数据流处理：在Vuex中，数据流是单向的，即从组件到store，再到组件。而在Pina中，数据流可以是双向的，即组件可以直接修改store的状态。
2. API设计：Pina的API更加简单和直观，它采用了函数式编程的思想和API，使得状态管理更加清晰和可维护。而Vuex的API有些冗长，在使用时需要写很多代码。
3. 响应式处理：在Pina中，使用的是Vue.js 3中的响应式处理机制，具有更高的性能和更好的类型支持。而在Vuex中，响应式处理是使用的Vue.js 2中的响应式处理机制，具有一些限制。
4. 异步处理：在Pina中，异步逻辑可以通过使用"thunk"或"effect"来处理。而在Vuex中，使用的是action来处理异步逻辑。
5. 模块化处理：在Pina中，模块化处理更加简单和灵活，每个模块都可以创建自己的store实例。而在Vuex中，模块化处理需要使用module机制，每个module都需要在全局的store中进行注册。

总的来说，Pina更加简单、直观和灵活，适用于小型应用程序的状态管理。而Vuex更适用于大型应用程序的状态管理，它提供了更多的功能和更好的文档和社区支持。选择使用哪个库取决于具体的项目需求和开发者的个人喜好。