VUE3中的状态管理VUEX

一、安装

npm install vuex@next --save
或者
yarn add vuex@next --save

二、store文件代码

src/store/index.ts

import { createStore, useStore as baseUseStore, Store } from 'vuex'
import { InjectionKey } from 'vue'

export interface State {
  count:number
}

export const key:InjectionKey> = Symbol('store')
export const store = createStore({
  state: {
    count: 0
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

export function useStore () {
  return baseUseStore(key)
}

三、$store 属性的类型声明

src目录下创建vuex.d.ts文件

import { ComponentCustomProperties } from 'vue'
import { Store } from 'vuex'
import { State } from '@/store/index'

declare module '@vue/runtime-core' {
   // 为 `this.$store` 提供类型声明
  interface ComponentCustomProperties {
    $store: Store
  }
}

四、main.ts文件

import { store, key } from './store'
const app = createApp(App)
app.use(store, key)

五、使用