简单的列表展示（vue+vuex+vue-router+webpack）

向前,向前进

看到vue2更新许久,一直没时间弄这些,年底有时间终于有空一探究竟了。
现在负责的公司的产品,正好想把技术栈更新一下,所以原型基于该产品,进行一下升级前的尝试和初步设计。

Vuex

我把store的mutations和actions都写了一起,但实际的项目还是尽量耦合度低一下,但后期你的项目状态多了以后,你的
store的维护成本会越来越大。

index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuex,{ Store } from 'vuex';
//一定要在创建根组件之前use
Vue.use(Vuex);
import storeObj from './store.js'
const store = new Store(storeObj);
//创建根组件
new Vue({
    router,
    store,
    el:"#app",
    template:'<App />',
    components: { App }
});

store.js

state

通过vuex存储的应用状态

state: {
        loading:true,
        canscroll:true,
        nodata:false,
        nodata_text : "暂无更多数据",
        listdata:[]        
}

mutations

vuex的状态值只能通过mutation进行更新,而且mutations中必须是同步的

mutations : {
        loading (state, newState) {
            state.loading = newState;
        },
        canscroll (state, newState) {
            state.canscroll = newState;
        },
        nodata (state, newState) {
            state.nodata = newState;
        },
        nodata_text (state, newState) {
            state.nodata_text = newState;    
        },
        listdata (state, newData) {
            state.listdata = state.listdata.concat(newData);
        },
        timedown2process (state,{ i,disabled,showtype,status }){
            state.listdata[i].disabled = disabled;
            state.listdata[i].showtype = showtype;
            state.listdata[i].status.value = status.value;
        },
        updateText(state, { text, i }){
            state.listdata[i].status.value.text = text;
        }
}

actions

异步操作更新可以放到action中,通过commit进而更新state

actions : {
    loading (context,bool) {
        context.commit('loading',bool);
    },
    canscroll (context,bool) {
        context.commit('canscroll',bool);
    },
    nodata (context,bool) {
        context.commit('nodata',bool);
    },
    nodata_text (context,text) {
        context.commit('nodata_text',text);
    },
    listdata (context,{ page , compiler }) {                
        api.getListData(page).then(function(data){                
            let jsonData = $.parseJSON(data);
            if(jsonData.length < 10) {           
                context.commit('canscroll',false);
                context.commit('nodata',true);
                context.commit('nodata_text','暂无更多数据');
            }
            context.commit('loading',false);
            jsonData = jsonData.map(compiler);
            context.commit('listdata',jsonData);
            context.commit('canscroll',!context.state.nodata);
        });
    },
    timedown2process ({ commit },obj) {
        commit('timedown2process',obj);
    },
    updateText({ commit },obj){
        commit('updateText',obj);
    }
}

getters

一些get方法,获取应用的state信息

getters:{
    getLoading (state) {
        return state.loading;
    },
    canscroll (state) {
        return state.canscroll;
    },
    nodata (state) {
        return state.nodata;
    },
    nodata_text (state) {
        return state.nodata_text;
    },
    listdata (state){
        return state.listdata;
    }
}

Router

在router.js中配置好所有的路由信息,当然也可以通过细化模块的方式生成最终的router.js

module.exports = {
    mode:'history',
    routes:[
        {
            path:'/',
            component: Index
        }
    ]
};

index.vue

终于来到了首页组件,把首页拆分为一个个组件,尽量编写可复用的组件,这不就是模块化的方便之处么!

<template>
    <div class="content">
        <Slider></Slider>
        <List></List>
        <listLoading></listLoading>
        <listStatus></listStatus>
    </div>
</template>
<style scoped>
    .content{
        margin-top: 3rem;
    }
</style>
<script>
import Slider from './index/slider.vue';
import List from './index/list.vue';
import listLoading from './index/list_loading.vue';
import listStatus from './index/list_status.vue';
export default {
    components:{
        Slider,
        List,
        listLoading,
        listStatus
    }
}
</script>