向前,向前进
看到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>