Vue3.0脚手架+typescript+vuex（基础二）即（vue全家桶+typescript使用总结）

     上一篇我们看了项目中的在但页面使用{Component, Vue, Watch, Prop, Emit}等装饰器方法；那么在本章我们看一下项目中我们使用vuex+typescript。在这里我在sec下创建store.ts，states.ts，mutations.ts，actions.ts，getters.ts。

 

     在看之前我们首先了解一下vuex到底是什么东西?vuex和redux都被称为同一状态管理，也被称之为全局状态管理，我们在state中定义的变量，可以在单个vue组件中使用，也可以在组建中做修改，并且你修改的可以全局得到响应。

     我们先来看store.ts，store.ts作为整个vuex的输入模块，在其里面引入vuex及vue，并且使用use的方法将vuex挂载到vue上面，同时我们将states，mutations，actions，getters引入进来，并导出store库，在main.ts中引入store.ts同时将store注册到vue项目中，store.ts写法如下：

import Vue from 'vue';
import Vuex from 'vuex';
import state from './states';
import mutations from './mutations';
import actions from './actions';
import getters from './getters';

Vue.use(Vuex);

export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
});

main.ts的写法和之前的写法相同：

import store from '@/store/store';

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

        接下来看state.ts，state译为状态的意思，说白了也就是定义变量初始化的一部分，但这与之前的写法又有一些不同的地方，在这里我们是使用typescript做的项目，在states.ts模块中，我们必须先定义它的类型，说白了也就是我这个变量的一个规则；然后在定义一个state，让其适合我们所定义的这个规则，具体写法看一下代码：   

/**
 * 类型的定义，在明确类型的时候将变量定义为明确类型，如果不能明确则定义any类型，除非必要，
 * 否则项目中还是尽量少定义any类型
 */
export interface States {
    success: string,
    code: any,
    loginList: any[],
    registerList: any[]
}

const states: States = {
    code: null,
    success: '',
    loginList: [],
    registerList: []
};

export default states

以上就是state的写法。

      mutations.ts：mutations译为突变，转变；也就是说我们可以在这个模块里面对我们所定义的state的变量进行改变，只能改变他的值，而不能改变他的类型。我们在这里的引入也有所不同，我们需要引入vuex中的mutationTree（定义的一个mutations规则），如下图，vuex封装的规则：

     

     

import { MutationTree } from "vuex";

const Mutations: MutationTree<any> = {
    // 校验
    EXAMINE_INFO(
        state: any,   //对应封装里面的state
        res: any      //对应封装里面的payload
    ): void {    //void与java中类似，返回值的含义
        if (res.data.msg !== undefined) {
            state.success = res.data.msg;
        }
        state.code = res.data.code;
    },
    // 注册
    REGISTER_INFO(
        state: any,
        res: any
    ): void {
        state.success = res.data.msg;
        state.code = res.data.code;
    },
    // 登录
    LOGIN_INFO(
        state: any,
        res: any
    ): void {
        state.loginList = res.data.data;
        state.success = res.data.msg;
        if (res.data.token !== undefined) {
            localStorage.setItem("TOKEN", res.data.token);
        }
    }
};
export default Mutations

      actions.ts：actions做异步操作，可以用来请求数据，引入的方法和mutations相同。

          

         

         具体写法：

        

import { ActionTree } from "vuex";
import { States } from './states'
import axios from 'axios'

const actions: ActionTree<States, any> = {
    // 注册校验用户名
    EXAMINE_REGISTER_DATA({ commit, state: States}, data: any[]) {
        axios({
            method: 'post',
            url: '/v1/api/verification',
            params: data
        }).then((res: any) => {
            commit('EXAMINE_INFO', res);
        }).catch((error) => {
            console.log(error)
        })
    },
};
export default actions

      getters.ts：将state中定义的变量返回出来，哪里需要，在哪里调用

      

import { GetterTree } from "vuex";
import { States } from './states'

const getters: GetterTree<States, any> = {
    // 校验
    success(
        state: any
    ): void {
        return state.success
    },
    code(
        state: any
    ): void {
        return state.code
    },
    // 登录
    loginList(
        state: any
    ): void {
        return state.loginList
    }
};
export default getters

      在.vue页面如何引入vuex？？

      从vuex-class中引入{Action, Getter}方法

      使用@Action,@Getter方法使用。具体写法如下：

@Getter private success: any;   //getter返回值
@Action private SEARCH_LOGIN_DATA!: any;

private loginButton() {  //在方法里面调用action方法，（相当于dispatch激活）
    this.SEARCH_LOGIN_DATA(this.param())
}

    可以参考该项目：GitHub - jiab7413/vue3.0-typescript

【推荐】

前端共享博客 沙沙游戏网-游戏软件攻略教程

网站建站知识 网站建设-Q站资源网

关注前端资料号，带你学习最新的前端知识