vue3实现vuex

Vue3 中实现 Vuex 状态管理

Vuex 是 Vue 的官方状态管理库，Vue3 中可以通过 Vuex 4.x 版本实现状态管理。以下是具体实现步骤：

安装 Vuex 在项目根目录下运行以下命令安装 Vuex：

npm install vuex@next --save

创建 Store 在 src/store/index.js 中创建 Vuex store：

import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})

在 main.js 中引入 Store

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

const app = createApp(App)
app.use(store)
app.mount('#app')

在组件中使用

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()

    const count = computed(() => store.state.count)
    const doubleCount = computed(() => store.getters.doubleCount)

    const increment = () => {
      store.dispatch('increment')
    }

    return { count, doubleCount, increment }
  }
}
</script>

模块化 Store 结构

对于大型项目，建议将 store 分割为模块：

创建模块

// src/store/modules/user.js
export default {
  namespaced: true,
  state: {
    name: 'John'
  },
  mutations: {
    setName(state, name) {
      state.name = name
    }
  }
}

在主 store 中引入模块

import user from './modules/user'

export default createStore({
  modules: {
    user
  }
})

在组件中使用模块

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()

    const userName = computed(() => store.state.user.name)

    const updateName = () => {
      store.commit('user/setName', 'Jane')
    }

    return { userName, updateName }
  }
}
</script>

使用 Composition API 封装 Store

可以创建自定义组合函数来简化 store 的使用：

// src/composables/useCounter.js
import { computed } from 'vue'
import { useStore } from 'vuex'

export default function useCounter() {
  const store = useStore()

  return {
    count: computed(() => store.state.count),
    doubleCount: computed(() => store.getters.doubleCount),
    increment: () => store.dispatch('increment')
  }
}

在组件中使用

<script>
import useCounter from '@/composables/useCounter'

export default {
  setup() {
    const { count, doubleCount, increment } = useCounter()

    return { count, doubleCount, increment }
  }
}
</script>

TypeScript 支持

如果需要 TypeScript 支持，可以创建类型化的 store：

// src/store/types.ts
export interface State {
  count: number
}

export interface Getters {
  doubleCount: number
}

export interface RootState {
  version: string
}

类型化 store

import { InjectionKey } from 'vue'
import { createStore, Store } from 'vuex'
import { State, Getters } from './types'

export const key: InjectionKey<Store<State>> = Symbol()

export default createStore<State>({
  state: {
    count: 0
  },
  // ...其他配置
})

在 main.ts 中使用

import { createApp } from 'vue'
import App from './App.vue'
import store, { key } from './store'

const app = createApp(App)
app.use(store, key)
app.mount('#app')

在组件中使用类型化 store

import { useStore } from 'vuex'
import { key } from '@/store'

export default {
  setup() {
    const store = useStore(key)
    // 现在 store 是类型化的
  }
}