【心无旁骛】vuex-typescript-example

我不惮以最大的赞美去赞美这样的项目，真的是非常有创意又有能力。
先放上我喜欢的这个项目的开源地址：https://github.com/gluons/vuex-typescript-example
我们再看一下项目的效果

这是一个可以存储颜色的取色器呢，刷新页面会发现颜色是有保存的，取色器中的颜色改变，左右两个box的颜色也会改变。
接下来我们来分析代码
main.ts中一般定义全局公共组件和样式等

//main.ts
import Vue from 'vue';
// vuetify: 为移动而生的Vue JS 2.0组件框架
import Vuetify from 'vuetify';

// Vuex store
import store from './store';

// Stylesheets
import 'vuetify/dist/vuetify.min.css';

// Components
import { Sketch } from 'vue-color';
import * as components from './components';

// Views
import Home from './views/Home.vue';

Vue.use(Vuetify);

Object.keys(components).forEach(name => {
    Vue.component(name, components[name]);
});
Vue.component('sketch-picker', Sketch);

new Vue({
    el: '#app',
    store,
    render: h => h(Home)
});

接下来看Home.vue页面
Home.vue中还使用了jade的写法，标签都不需要呢~

<template lang="pug">
v-app#home
    v-toolbar.purple(dark)
        v-toolbar-title #[blank-link(url='https://github.com/vuejs/vuex/') Vuex] with #[blank-link(url='https://www.typescriptlang.org/') TypeScript] example
    main
        v-content
            v-container(fluid, grid-list-xl)
                v-layout(row, wrap, align-content-center, justify-space-around)
                    v-flex(xs12, md3, order-md2)
                        sketch-picker(:value='colour', @input='updateColor').picker-center
                    v-flex(xs12, md4, order-md1)
                        color-box(title='Box 1')
                    v-flex(xs12, md4, order-md3)
                        color-box(title='Box 2')
</template>

很有意思的项目啊，当开源者的水平越高超，你能够欣赏到的代码的快感就越强烈，越会有相逢恨晚的感觉
接下来我们看Home.vue中的ts部分
看到引入了
import { Getter } from '@/decorators';
我猜测那个时候，可能还没有装饰器的功能，看到这里将getters封装了一层，好像是将getters变成store的全局变量

让全局可以使用getters函数
Home页面中有一个取色器组件，他有一个updateColor方法

//Home.vue
<template lang="pug">
v-app#home
    v-toolbar.purple(dark)
        v-toolbar-title #[blank-link(url='https://github.com/vuejs/vuex/') Vuex] with #[blank-link(url='https://www.typescriptlang.org/') TypeScript] example
    main
        v-content
            v-container(fluid, grid-list-xl)
                v-layout(row, wrap, align-content-center, justify-space-around)
                    v-flex(xs12, md3, order-md2)
                        sketch-picker(:value='colour', @input='updateColor').picker-center
                    v-flex(xs12, md4, order-md1)
                        color-box(title='Box 1')
                    v-flex(xs12, md4, order-md3)
                        color-box(title='Box 2')
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Getter } from '@/decorators';

@Component({
    name: 'Home'
})
export default class Home extends Vue {
    @Getter('colour') colour: string;
    // Actions 支持同样的载荷方式和对象方式进行分发：
    updateColor(newColor) {
        let newColorHex: string = newColor.hex;
        // newColorHex是deploy是载荷，传递的数据
        this.$store.dispatch('updateColor', newColorHex);
    }
}
</script>

<style scoped>
#home {
    margin-bottom: 1rem;
}
.picker-center {
    margin: 0 auto;
}
</style>

我还是很疑问的，因为colorBox并没有在Home.vue中定义，以致于我没有结合colorBox进行分析项目

//src\components\ColorBox.vue
<template lang="pug">
v-card(raised, hover)
    v-card-title(primary-title, v-if='hasTitle')
        span.title {{ title }}
    v-card-text
        .color-box(:data-color='colour', :style='boxStyle')
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Getter } from '@/decorators';

@Component({
    name: 'ColorBox',
    props: {
        title: String
    }
})
export default class ColorBox extends Vue {
    @Getter('colour') colour: string;

    title: string;

    get hasTitle() {
        return !!this.title;
    }
    get boxStyle() {
        return {
            'background-color': this.colour
        };
    }
}
</script>

<style scoped>
.color-box {
    width: 150px;
    height: 150px;
    margin: 0 auto;
}
</style>

//src\components\BlankLink.vue
<template lang="pug">
a(:href='url', target='_blank', rel='noopener noreferrer')
    slot
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';

@Component({
    name: 'BlankLink',
    props: {
        url: {
            type: String,
            required: true
        }
    }
})
export default class BlankLink extends Vue {}
</script>

<style lang="scss" scoped>
a {
    &, &:hover, &:visited {
        color: inherit;
        text-decoration: none;
    }
    &:hover {
        text-decoration: underline;
    }
}
</style>

state里面定义color，color是个变量

//src\store\state.ts
import randomColor from 'randomcolor';

export default class State {
    public color: string;

    constructor() {
        this.color = randomColor();
    }
}

getters中的color，从原有的定义中取出来

//src\store\getters.ts
import { GetterTree } from 'vuex';

import State from './state';

// GetterTree<[current state], [root state]>
const getters: GetterTree<State, State> = {
    /*
     * It's just color with new name.
     * Example for using getters.
     */
    colour(state: State): string {
        return state.color;
    }
};

export default getters;

mutations同步处理函数

//src\store\mutation-types.ts
export const COLOR = 'COLOR';

//src\store\mutations.ts
import { MutationTree } from 'vuex';

import { COLOR } from './mutation-types';
import State from './state';

const mutations: MutationTree<State> = {
    [COLOR](state: State, newColor: string): void {
        state.color = newColor;
    }
};

export default mutations;

看不懂这个
COLOR: void {
state.color = newColor;
}
action是进行异步处理的

//src\store\actions.ts
import { ActionContext, ActionTree } from 'vuex';

import { COLOR } from './mutation-types';
import State from './state';

// ActionTree<[current state], [root state]>
const actions: ActionTree<State, State> = {
    updateColor({ commit }: ActionContext<State, State>, newColor: string): void {
        commit(COLOR, newColor);
    }
};

export default actions;

updateColor这个更新函数，就可以和updateColor进行结合了

【心无旁骛】vuex-typescript-example

猜你喜欢