vue3学习(五.2) vuex （useStore 组合式函数类型声明）

并未搞通，先抄为敬。

1 定义类型化的 InjectionKey。

// store.ts
import { InjectionKey } from 'vue'
import { createStore, Store } from 'vuex'

// 为 store state 声明类型
export interface State {
  count: number
}

// 定义 injection key
export const key: InjectionKey<Store<State>> = Symbol()

export const store = createStore<State>({
  state: {
    count: 0
  }
})

2将 store 安装到 Vue 应用时提供类型化的 InjectionKey

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

import {store, key} from '@/store/store';

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

3 组件使用时。

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

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

    store.state.count // 类型为 number
  }
}

4 对前序业务进行简化处理。

4.1 定义

// store.ts
import { InjectionKey } from 'vue'
import { createStore, useStore as baseUseStore, Store } from 'vuex'

export interface State {
  count: number
}

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

export const store = createStore<State>({
  state: {
    count: 0
  }
})

// 定义自己的 `useStore` 组合式函数
export function useStore () {
  return baseUseStore(key)
}

4.2 使用

// vue 组件
import { useStore } from './store'

const store = useStore()
console.log(store.state.count) // 类型为 number

5 支持module

5.1 模块代码 ，export 时，store + 接口（数据规范）

export interface iDemo {
    count:number,
    name:string,
}

export const demoStore =  {
    namespaced: true,

    state:{
        count:1,
        name:'hello'
    },
    mutations:{
        incr(state:iDemo) {
            state.count ++;
        }
    },
    getters:{
        countDouble: (state:iDemo) => {
            return state.count * 2;
        },
    },

}

5.2 store 入口文件 ，使用demo

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

import {demoStore, IDemo} from '@/store/modules/demo'

// 为 store state 声明类型
export interface RootState {
  count: number,
  
  demoStore:IDemo
}

// 定义 injection key
export const key: InjectionKey<Store<RootState>> = Symbol()

export const store = createStore<RootState>({
  state: {
    count: 0
  },
  mutations:{
    incr(state:RootState) :void{
        state.count++;
    }
  },
  modules:{
    //引入
    demoStore
  }
})

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

5.3 组件使用。

<script setup lang="ts">
import { computed } from 'vue'
import { useStore } from '@/store/store'


const store = useStore();
console.log("@@@",store)

</script>

<template>
 {{store.state.count}}
 {{store.state.demoStore.name}}
 {{store.getters['demoStore/countDouble']}}

<button @click="store.commit('incr')"> + 1 处理</button>

</template>

<style scoped>

</style>