Vuex+ts规范案例

╰半夏微凉° 2022-10-16 06:08 160阅读 0赞

# 准备工作 #

## 所需了解的vuex接口类 ##

### Module<S,R> ###

> module的类型

S 代表当前module的State类，  
R代表 createStore的State类

### ActionContext<S,R> ###

> store上下文的类型

S 代表当前的State类，  
R代表 createStore的State类

### StoreOptions ###

> 代表创建的Store类型  
> 这个类代表store的配置参数不代表vuex实例  
> S 代表当前module的State类，

### Store ###

> vuex实例类 可用直接挂载的app.use

## 所需了解vuex的Store需要准备State类型 ##

文件名 root-types.ts 下面文件引入的就是这个接口类

export interface RootState { 
    //根据实际情况里面定义自己需要的类型
    }

# 创建实例 #

vuex ts支持 [官网][Link 1]  
官网的案例不全这里提供比较完善的解决方案，。有些类型没讲解

import {   App, InjectionKey } from 'vue';
    import Vuex,{  createStore, Store,StoreOptions } from 'vuex';
    import { loginModule} from './modules/login';
    import {  RootState } from './root-types';
    interface State { 
        count: number
      }
    // 定义 injection key 
    export const key: InjectionKey<Store<State>> = Symbol()
    // 创建一个新的 store 实例 StoreOptions<RootState>
     const store:Store<RootState> = createStore({ 
        state (){ 
        
        },
        modules:{ 
            loginModule
       }
      })
    /** * 挂载到vue实例函数 * @param app vue实例 */
     export function setupStore(app: App<Element>) { 
      app.use(store,key);
    }

# modules案例 #

import { Store,Module, ActionContext} from 'vuex';
    import {  RootState } from '../root-types';
    interface LoginState { 
        permissionList:Array<number>;
    } 
    export const loginModule:Module<LoginState,RootState>= { 
        namespaced: true,//namespaced: true 的方式使其成为带命名空间的模块。保证在变量名一样的时候，添加一个父级名拼接。
        state: ():LoginState => ({ 
          permissionList:[]
        }),
        mutations: { 
          increment (state:LoginState) { 
            // 这里的 `state` 对象是模块的局部状态
            state.permissionList.push(state.permissionList.length+1)
          }
        },
        getters: { 
            doneTodos (state:LoginState)  { 
              return state.permissionList.filter(todo => todo)
            }
          },
        actions: { 
            increment (context:ActionContext<LoginState,RootState>) { 
              context.commit('increment')
            }
          }
      }

# 挂载到Vue #

import {  createApp } from 'vue'
    import App from './App.vue'
    import {  setupRouter } from './router'
    import { setupStore} from './store/index';
    const app =createApp(App)
    setupStore(app)
    setupRouter(app)
    app.mount('#app')

[Link 1]: https://next.vuex.vuejs.org/zh/guide/typescript-support.html