lan-vue

关于

Web整体架构方案(Vue版本)

如何运行lan-vue

• 克隆kil到本地 git clone https://github.com/lovelypig5/kil.git

• 进入kil文件夹安装dependencies npm install -g 或者 本地安装再在全局link到kil的node_modules目录

• 在lan-vue项目文件夹下安装dependencies npm instsall

• 启动 kil dev

Vuex

###使用步骤介绍

• 项目中使用vuex氛围五个步骤，具体介绍如下

  1. entrance: 在入口文件中编入store
  2. store: 控制中心中引入各个数据模块
  3. module: 定义模块的数据操作
  4. actions: 统一动作声明和dispatch
  5. view: 界面触发action

• entrance: 在入口文件中编入store

js/main.js

import store from './vuex/store'

#...


let VueParam = {
    el: '#body',
    store
};

# ...

router.start(VueParam);

• store: 控制中心中引入各个数据模块

js/vuex/store.js

import Vue from 'vue'
import Vuex from 'vuex'
import welcome from './components/welcome'

Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        welcome
    }
})

各个模块的数据操作被被分别定义在了components下的各个文件中

• module: 定义模块的数据操作

js/vuex/components/welcome.js

const state = {
    profile: {'name': 'Kimi', 'age': 31, 'gender': 'male'} 
}

const mutations = {
    UPDATE_PROFILE (state, profile) {
        state.profile = Object.assign(state.profile, profile);
    }
}

export default {
    state,
    mutations
}

• actions: 统一动作声明和dispatch

js/vuex/actions.js

export const updateProfile = makeAction('UPDATE_PROFILE')

function makeAction(type) {
    return ({dispatch}, ...args) => dispatch(type, ...args);
}

所有数据的操作都在具体的模块(vuex/components)中，但需要统一在actions中定义动作用来做dispatch。

• view: 界面触发action

components/welcome.vue

<template>
	<input @change="tryUpdateAge" v-model="profile.age"></input>
</template>

components/welcome.vue

\<script type="text/javascript">

import { updateProfile } from '../js/vuex/actions'

export default {
    vuex: {
        getters: {
            profile: ({welcome}) => welcome.profile
        },
        actions: { // act as setters
            updateProfile
        }
    },
	#...
    methods: {
        tryUpdateAge(e) {
            const value = e.target.value.trim();
            if(value && !isNaN(parseInt(value))) {
                this.updateProfile({'age': parseInt(value)});
            }
        }
    }
}
</script>

从import 从actions引入对应操作。

getters: 数据获取可以直接把数据模块作为参数传入到getter模块即可用

setters: 必须通过actions中的方法调用，最终触发到welcome数据模块中操作完成写

Components

directives