ts+vuex

前言

vuex在vue里面是一个很常用的功能，那么结合typescript该怎么使用，我们一起看一下
下面我会写一个vuex多模块的使用（结合module），我们写一个面包屑的demo

image.png

crumbs.ts文件

const state = {
    crumbsArr: ['首页']
}
const mutations = {
    ADDCRUMBSARR: (state:any,view: any)=> {
        state.crumbsArr.push(view)
    },
    DELCRUMBSARR: (state: any, view: any)=> {
        let index = state.crumbsArr.indexOf(view)
        if (index > -1) {
            state.crumbsArr.splice(index, 1)
        }
    }
}

export default {  
    namespaced: true,  // 这个是命名空间，用来区分不同的模块，我是根据文件的名字来区分
    state,
    mutations,
};

getters.ts

const getter = {
    crumbsArr: (state: any)=> state.crumbs.crumbsArr
}
export default getter

index.ts

  import Vue from 'vue';
  import Vuex from 'vuex';
  import getters from '@/store/getters';
  Vue.use(Vuex);
  const modulesFiles = require.context('./modules', true, /\.ts$/)
  const modules = modulesFiles.keys().reduce((modules: any, modulePath: any) => {
    // set './app.js' => 'app'
    const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
    const value = modulesFiles(modulePath)
    modules[moduleName] = value.default
    return modules
  }, {})
  const store = new Vuex.Store({
    modules,
    getters
  });
  export default store

上面就是一个比较基础的ts + vuex，如果需要action自己在里面加就行了

用法

比如我现在有一个按钮，点击之后就新增面包屑

<template>
// 这里只是举一个例子
  <div @click='addCrumbs'>增加面包屑</div>
</template>

<script lang="ts">
    import {Vue, Component} from 'vue-property-decorator';
    @Component
    export default class Crumbs extends Vue{
        addCrumbs(){
        // 这里与不带module的区别就是，第一个参数需要 命名空间标识/方法
            this.$store.commit('crumbs/ADDCRUMBSARR', '政府要闻')
        }
    }
</script>

动态获取面包屑,vue里面的computed属性，在vue+ts需要用get来代替

<template>
   <div v-for="(item ,index) in crumbsArr">{{item}}</div>
</template>
<script lang="ts">
    import {Vue, Component} from 'vue-property-decorator';
    @Component
    export default class Crumbs extends Vue{
        get crumbsArr(){
            // 每当面包屑数组改变，就会获取到更改后的数组
            return this.$store.state.crumbs.crumbsArr
        }
    }
</script>