工程"/>
Vue Cli3 TypeScript 搭建工程
Vue Cli3出来也一段时间了,我想尝试下Vue结合TypeScript搭建个工程,感受下Vue下用TS...网上有一篇讲的非常详细的教程 vue-cli3.0 搭建项目模版教程(ts+vuex+axios) 作者:陈小生_1017
我看完教程后(好长的一篇博文,不得不服作者的用心,赞!),我去博主留的git地址 .git 克隆一份下来,安装完依赖后,发现好多错误...汗...我在原博客评论区和git issue区均为发现问题的解决办法,我尝试着一番google后,项目能跑起来了,顺便研究了下vuex-class的用法,下面会贴出具体的用法。出现的错误有:
1.引入scss的路径不对,按照下边改为相对路径就可以了
// vue-cli3-tpl/src/components/test/test.vue ... <style lang="scss">/*@import "@/assets/scss/variables";*/@import "../../assets/scss/variables";.test-wrap {width: 100%;color: $background-color;} </style>
// vue-cli3-tpl/src/assets/scss/variables.scss$background-color : #4c94f1;
为了方便,我们引用scss全局变量,在每一个style标签引入这个公共变量文件太麻烦了,官方有全局引入的方法:
// vue.config.js css: {modules: false, // 启用 CSS modulesextract: 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 // 更改state const mutations: MutationTree<LoginState> = {// 更新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.ts import Vue from 'vue' import Vuex from 'vuex'Vue.use(Vuex)// modules import 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.ts import { 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获取state const getters: GetterTree<LoginState, any> = {getAuthor: (state: LoginState) => state.author }// 更改state const mutations: MutationTree<LoginState> = {// 更新state都用该方法 UPDATE_STATE(state: LoginState, data: LoginState) {for (const key in data) {if (!data.hasOwnProperty(key)) { return }state[key] = data[key]}} }const actions: ActionTree<LoginState, any> = {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.ts import { 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// datadata: 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() {// }}
参考博文:如何使用 vue + typescript 编写页面 ( vuex装饰器部分 )
转载于:.html
更多推荐
Vue Cli3 TypeScript 搭建工程
发布评论