vue-cli3.0 搭建项目模版教程（ts+vuex+axios）陈小生_1017
https://github.com/chenfangsheng/vue-cli3-tpl.git
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 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预设器配置项 }, // 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 } // 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 // 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() { // } }