最近手里有个大活，一个维护了三年的vue1.0项目，要升级到2.0，头疼了半个月终于是升上去了，接下来做个记录，记录下升级思路。
一、升级有四个大难点，n个小难点：
1、记住升级不要急，刚开始几天页面空白都是正常的，有报错就好，最怕效果不出还不报错，升级第一步:
"vue": "2.6.10",
"vue-loader": "12.0.0",
"vue-router": "^3.1.0",
先升级这三个，vuex2.0以上兼容1.0的所以暂时不着急升级，页面显示出来后再升级，这三个版本号亲测不冲突，装完新的依赖后页面会一片空白，控制台一直标红，这个时候莫慌，现在报错的主要原因是，vue-router的语法有了很大的变化和vue的语法变化所导致的，你可以淡定的打开vue 官方迁移文档找迁移工具 vue-migration-helper 帮你检测vue的语法变化，同时也告诉你怎么改，当然这个只能检测组件内部语法，建议从登陆页开始，先看到页面心里有点底再说。
2、看到登陆页面并且能登录后，咱们就先停一哈，还要吧vuex搞上去，这样vue主架构就升级完成了，vuex不多说看代码，语法变了思想没变：
vuex1.0的action：
import * as types from '../types';
import {
Api,
Util,
Opt
} from '@Facade';
export const fetchSummary = ({
dispatch
}) => {
Api.get(`/summary`).then(res => {
const json = res.json();
dispatch(types.SET_SUMMARY, json);
});
};
export const fetchAttackSummary = ({
dispatch,
state
}, callback) => {
Api.get('/attackStat/summary').then(res => {
const json = res.json();
dispatch(types.SET_ATTACK_TOTAL, json.total || 0);
if (Util.isFunction(callback)) {
callback(json);
}
});
}
vuex3.0的action
import * as types from '../types';
import {
Api,
Util,
Opt
} from '@Facade';
const actions = {
setAlarmQueryCondition({commit}, queryCondition) {
// console && console.info(queryCondition);
commit(types.SET_ALARM_QUERY_CONDITION, queryCondition || {});
},
setQueryParameter({commit}, queryCondition) {
// console && console.info(queryCondition);
commit(types.SET_LOG_QUERY_PARAMETER, queryCondition || {});
},
clearAlarmQueryCondition({commit}) {
commit(types.SET_ALARM_QUERY_CONDITION, {});
},
setWindow({commit}, wh) {
// commit(types.SET_WINDOW, width, height > MIN_HEIGHT ? height : MIN_HEIGHT);
console && console.info('Window width is %s, height is %s', wh.width, wh.height);
if (Util.isNumber(wh.width) && Util.isNumber(wh.height)) {
commit(types.SET_WINDOW, wh);
} else {
console && console.error('Invalid param for window size!');
}
},
vuex1.0的getters
export const getSummary = ({
sa
}) => {
return sa.summary;
}
export const getAttackTotal = ({
sa
}) => {
return sa.attack.total;
}
export const getThreatTotal = ({
sa
}) => {
return sa.threat.total;
}
export const getThreatSummary = ({
sa
}) => {
return sa.threat;
}
vuex3.0的getters
const getters = {
getSummary(state) {
return state.summary;
},
getAttackTotal(state) {
return state.attack.total;
},
getThreatTotal(state) {
return state.threat.total;
},
getThreatSummary(state) {
return state.threat;
},
getAssetTotal(state) {
return state.asset.total;
},
getKeyAssetNum(state) {
return state.asset.keyAssetNum || 0;
},
mutations和state变化不大。
页面引用变化：
vuex1.0
import { getGlobalCondition, getGlobalStartTime, getGlobalEndTime } from '@/store/getters/sa-getters';
//四个语法类似
export default {
vuex: {
getters: {
globalCondition: getGlobalCondition,
globalStartTime: getGlobalStartTime,
globalEndTime: getGlobalEndTime
}
},
vuex3.0：
import {mapGetters,mapActions} from 'vuex';
computed: {
...mapGetters({
mainHeight: 'getMainHeight',
globalCondition: 'getGlobalCondition',
globalStartTime: 'getGlobalStartTime',
globalEndTime: 'getGlobalEndTime',
mapType: 'getMapType'
})
},
methods: {
...mapActions(['fetchMapType'])
}
以上就是vuex的变化。
3、webpack1.0升级3.0有时间在写，我要下班了。。。
