vuex|vue3中使用vuex4 vue.js|前端|javascript

vue3 中使用vuex
【vuex|vue3中使用vuex4】vuex中没有对于store中的数据进行类型定义因此vuex中使用ts的话需要我们扩展vue的模块定义vuex的store的类型 .d.ts类型的文件就是描述性文件在vuex中用于描述暴露出的store的类型
因为vue3 中的单文件组件setup其中没有this的概念因此想使用全局定义好的$store 则需要通过getCurrentInstance()函数获取到vue实例对象我们还可以通过useStore（）去获取格式化好的store，一般建议使用userStore（）的方式去获取格式化好的store

//定义描述性文件 import { ComponentCustomProperties } from 'vue' import { Store } from 'vuex'declare module '@vue/runtime-core' { // 声明自己的 store state interface State { count: number }// 为 `this.$store` 提供类型声明 interface ComponentCustomProperties { $store: Store>//定义了一个 } }

vue3 中组合api中使用useStore

//store.ts import{createStore,Store} from 'vuex' import {InjectionKey} from 'vue' ///定义state的类型 export interface State{ counter:number } //定义注册的key export const key:InjectionKey>>=Symbol()//通过泛型Store 指定key InjectionKey的泛型 //创建vuex export const store=createStore>({ state:{ counter:1 } }) //main.ts import {key,store} from './store.ts' app.use(key,store) //.vue 文件中 import {useStore} from 'vuex' import {key} from 'store.ts' //获取格式化好类型的store const store= useStore(key)

//vue组件中使用mapState() mapGetters() //这两个方法的使用都在组件的计算属性中 const store=useStore(key) const count= compute( mapState(['state中属性的名称']).value.属性的名称.bind({$store:store}) ) const count= compute( mapGetters(['getters中属性的名称']).value.属性的名称.bind({$store:store}))

//使用mapAction()和mapMutations() const changeCount=mapMutations(['muations中的名称']).addCount.bind({$store:store}) //如果需求传递参数的时候则在调用的时候传递即可 changeCount(12) //对应的mutations中接收参数

modules使用同vue2 中定义的modules一样
后续持续整理更新