本文共 4327 字，大约阅读时间需要 14 分钟。
uniapp+ 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 = { modules: { fishLan }, state: { nickname: '未设置', }, mutations: { change(state, nickname) { state.nickname = nickname; } }}export default new Vuex.Store (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 = { setSwiperItem(state,swiperData){ state.swiperList = swiperData; }, setEntranceList(state, list){ state.entranceList = list; }, setcoursesList(state, courses){ state.coursesList = courses; }}const actions:ActionTree ={ 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 = { 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;
转载地址：http://mxurf.baihongyu.com/