vue 项目搭建注意要点

1. vscode 自动保存检查
[cc lang=”javascript”]
{“eslint.enable”: true,
“eslint.autoFixOnSave”: true,
“eslint.validate”: [
“javascript”,
“javascriptreact”,
{
“language”: “html”,
“autoFix”: true
},
{
“language”: “vue”,
“autoFix”: true
}
]}
[/cc]

vue router

2.1 beforeRouteUpadate
只能监听 子组件路由的切换 如 /foo/:id，在 /foo/1 和 /foo/2 之间跳转会触发，
hash， search 变化都不能触发
2.2 watch {
$router(to, from){} // 解决所有变化
}
2.3 beforeRouteEnter
// 只会在 顶层 主路由变化触发，进入，触发

vue 存store
[cc lang=”javascript”]
created () {
//在页面加载时读取sessionStorage里的状态信息
if (sessionStorage.getItem(“store”) ) {
this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem(“store”))))
}

//在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener(“beforeunload”,()=>{
sessionStorage.setItem(“store”,JSON.stringify(this.$store.state))
})
}[/cc]