Vue Cli3出来也一段时间了，我想尝试下Vue结合TypeScript搭建个工程，感受下Vue下用TS...网上有一篇讲的非常详细的教程   作者：

　　我看完教程后（好长的一篇博文，不得不服作者的用心，赞！），我去博主留的git地址  克隆一份下来，安装完依赖后，发现好多错误...汗...我在原博客评论区和git issue区均为发现问题的解决办法，我尝试着一番google后，项目能跑起来了，顺便研究了下vuex-class的用法，下面会贴出具体的用法。出现的错误有：

　　1.引入scss的路径不对，按照下边改为相对路径就可以了

// vue-cli3-tpl/src/components/test/test.vue ...

// vue-cli3-tpl/src/assets/scss/variables.scss $background-color : #4c94f1;

　　为了方便，我们引用scss全局变量，在每一个style标签引入这个公共变量文件太麻烦了，官方有全局引入的方法：

// vue.config.jscss: {    modules: false, // 启用 CSS modules    extract: true, // 是否使用css分离插件    sourceMap: true, // 开启 CSS source maps?    loaderOptions: {      // 给 sass-loader 传递选项      sass: {        // @/ 是 src/ 的别名        // 所以这里假设你有 `src/assets/scss/variables.scss` 这个文件        data: `@import "@/assets/scss/variables.scss";`      }    } // css预设器配置项  },

　　2.TS报错: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'LoginState'.  No index signature with a parameter of type 'string' was found on type 'LoginState'

// vue-cli3-tpl/src/store/module/login.ts// 更改stateconst mutations: MutationTree
     
       = {  // 更新state都用该方法  UPDATE_STATE(state: LoginState, data: LoginState) {    for (const key in data) {      if (!data.hasOwnProperty(key)) { return }      state[key] = data[key] // TS7053错误    }  }}
     

　　我们在js中访问对象时，[]中的name的类型必须是string，但是在ts中name的隐式类型为any，所以ts发现没有类型是string的的索引标记。。。解决办法：指定对象中key的类型

// vue-cli3-tpl/src/types/views/login.interface.ts// VUEX login.State 参数类型export interface LoginState {  [key: string]: any}

　　最后贴下我 vuex-class 的使用：

// vue-cli3-tpl/src/store/index.tsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)// modulesimport login from './module/login'import index from './module/index'export default new Vuex.Store({  state: {    //  },  mutations: {    //  },  actions: {    //  },  modules: {    login,    index  }})

// vue-cli3-tpl/src/store/module/login.tsimport { LoginState } from '@/types/views/login.interface'import { GetterTree, MutationTree, ActionTree } from 'vuex'import * as LoginApi from '@/api/login'const state: LoginState = {  author: 'edison',  age: 18,  obj: null}// 强制使用getter获取stateconst getters: GetterTree
     
       = {  getAuthor: (state: LoginState) => state.author}// 更改stateconst mutations: MutationTree
      
        = {  // 更新state都用该方法  UPDATE_STATE(state: LoginState, data: LoginState) {    for (const key in data) {      if (!data.hasOwnProperty(key)) { return }      state[key] = data[key]    }  }}const actions: ActionTree
       
         = {  UPDATE_STATE_ASYN({ commit, state: LoginState }, data: LoginState) {    commit('UPDATE_STATE', data)  },  async GET_DATA_ASYN({ commit, state: LoginState }) {    const result = await LoginApi.getData()    commit('UPDATE_STATE', {'obj': result.data})    return result.data  }}export default {  namespaced: true,  state,  getters,  mutations,  actions}
       
      
     

// vue-cli3-tpl/src/views/login/login.tsimport { Component, Vue } from "vue-property-decorator"import {Getter, Action, namespace, State} from "vuex-class"import { LoginData } from '@/types/views/login.interface'import { Test } from "@/components" // 组件const LoginModule = namespace('login')@Component({  components: {    Test  }})export default class About extends Vue {  // Getter  // @Getter login.author  // Action  // 和 @State("author") author 相同  @LoginModule.State('author') author!: string  // 直接映射 @State age  @LoginModule.State age!: number  @LoginModule.State obj!: any  /**   * state映射到组件时，是放在computed下的，因此本身为计算属性   * */  // 只从state获取  @LoginModule.State(state => state.author) author1!: string  // 从 state 和 getters 上获取  @LoginModule.State((state, getters) => state.author + getters.getAuthor) author2!: string  // 内部使用namespace 如果不想在外部使用namespace，可以使用参数传递namespace  @State('author', {namespace: 'login'}) author3!: string  // Getter  @Getter("login/getAuthor") getAuthor!:string;  @Getter("getAuthor",{namespace:"login"}) getAuthor1!:string;  @LoginModule.Getter('getAuthor') getAuthor2!:string;  // Action  @LoginModule.Action GET_DATA_ASYN!: Function  @LoginModule.Action UPDATE_STATE_ASYN!: Function  // data  data: LoginData = {    pageName: 'login'  }  created() {    this.GET_DATA_ASYN()      .then((data: any) => {        console.log('data ', data)        debugger      })    console.log('state用法')    console.log('this.author ', this.author)    console.log('this.author1 ', this.author1)    console.log('this.author2 ', this.author2)    console.log('this.author3 ', this.author3)    console.log('getter用法')    console.log('this.getAuthor ', this.getAuthor)    console.log('this.getAuthor1 ', this.getAuthor1)    console.log('this.getAuthor2 ', this.getAuthor2)    console.log('this.age ', this.age)    console.log('action用法')    this.UPDATE_STATE_ASYN(      {        author: 'edison modified'      }    )    console.log('modified author ', this.author)  }  activated() {    //  }  mounted() {    //  }  // 初始化函数  init() {    //  }}

　　参考博文：