vuex中使用typescript

一。剛開始使用的方式（很多類型沒有明確 ，總是覺的沒typescript的樣子）

1.store/index.ts 文件

import Vue from 'vue';
import Vuex from 'vuex';
import fishLan from './module/fishLan';
Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    fishLan
  },
  state: {
    nickname: '未設置',
  },
  mutations: {
    change: function(state: Global.IState, nickname: string): void {
      state.nickname = nickname;
    },
  },
});
export default store;

2.fishLan.ts 

import request from '../../utils/request';
import api from '../../utils/api';
export default {
    namespaced: true,
    state: {
        swiperList: [],
        entranceList: [],
        coursesList: []
    },
    getters: {},
    mutations: {
        setSwiperItem(state: any,swiperData: string){
           state.swiperList = swiperData;
        },
        setEntranceList(state: any , list: string){
            state.entranceList = list;
        },
        setcoursesList(state:any, courses:string){
            state.coursesList = courses;
        }
    },
    actions: {
        async setOpenId(context:any){
            const {data } = await request.post(api.getOpenId,{});
            uni.setStorage({
                key: 'OpenID ',
                data: data.OpenID,				
            });
            uni.setStorage({
                key: 'session_key ',
                data: data.session_key,				
            });
        },
        async getBannerData(context:any){
            const {data } = await request.post(api.getBannerData,{});
            context.commit('setSwiperItem', data);
        },
        async getCourses(context:any){
            const {data } = await request.post(api.getCourses,{});
            context.commit('setcoursesList', data);
        },
        async getEntranceData(context:any){
            const data = await request.post(api.getEntrance,{});
            return data;
        }
    }
}

二。進一步修改後完善後

1.1.store/index.ts 文件

import Vue from 'vue';
import Vuex, { StoreOptions } from 'vuex';
import {fishLan} from './module/fishLan';
import { RootState } from './rootTypes'; //是root節點下對應的state的類型

Vue.use(Vuex);

const store: StoreOptions<RootState> = {
  modules: {
    fishLan
  },
  state: {
    nickname: '未設置',
  },
  mutations: {
    change(state, nickname) {
      state.nickname = nickname;
    }
  }
}
export default new Vuex.Store<RootState>(store)

2.rootTypes.ts

//每個state 都有對應的interface,用於明確該state的類型
export interface RootState {
    nickname: string
}

3.

import { MutationTree, ActionTree, Module } from 'vuex';
import request from '../../utils/request';
import api from '../../utils/api';
import { RootState } from './../roottypes';

//接口
export interface fishLanState {
    swiperList: any,
    entranceList: any,
    coursesList: any
}

//重新賦值
const state: fishLanState = {
    swiperList: [],
    entranceList: [],
    coursesList: []
}

const mutations:MutationTree<fishLanState> = {
    setSwiperItem(state,swiperData){
        state.swiperList = swiperData;
     },
     setEntranceList(state, list){
         state.entranceList = list;
     },
     setcoursesList(state, courses){
         state.coursesList = courses;
     }

}

const actions:ActionTree<fishLanState,RootState> ={
    async setOpenId(){
        const {data } = await request.post(api.getOpenId,{});
        uni.setStorage({
            key: 'OpenID ',
            data: data.OpenID,              
        });
        uni.setStorage({
            key: 'session_key ',
            data: data.session_key,             
        });
    },

    async getBannerData({commit}){
        const {data } = await request.post(api.getBannerData,{});
        commit('setSwiperItem', data);
    },

    async getCourses({commit}){
        const {data } = await request.post(api.getCourses,{});
        commit('setcoursesList', data);
    },

    async getEntranceData(){
        const data = await request.post(api.getEntrance,{});
        return data;
    }
}

export const fishLan: Module<fishLanState,RootState> = {
    namespaced: true,
    state,
    mutations,
    actions
}

三。頁面中的調用

import { State, Action, Mutation, namespace } from "vuex-class";

//接近vuex中的寫法
@State(state => state.fishLan.swiperList) private swiperList!: string;
@Mutation('fishLan/setSwiperItem') private setSwiperItem!: Function;
@Action('fishLan/getBannerData') private getBannerData!: Function;

//通過namescpace
@Action("getBannerData", { namespace: "fishLan" })
getBannerData: any;
@Mutation("getBannerData", { namespace: "fishLan" })
getBannerData: any;