首发于我的github博客, 欢迎关注
-
package.json
scripts
: 查看项目如何 dev、build、deploydependencies
: 快速了解项目的依赖
-
src/main.js
项目的入口文件, 快速了解项目使用的组件、周边插件new Vue({ el: '#app', router: router, store: store, render: h => h(App) })
-
router/index.js
路由中心,快速了解页面组成,父子路由之间的关系(children、)- 根据路由文件了解路由跳转的逻辑
- 找到关键页面:登录、首页
- 分析登录页面(次要)、首页的逻辑
-
页面分析(以
/pages/home/Home.vue
首页为例),了解页面如何加载数据,并将数据渲染到页面上- 页面初始化: created (解析路由参数、发起 ajax 请求、callback 初始化页面数据,渲染页面)
- 发起 ajax 请求的逻辑一般写在 store 中
-
一个简单的 store module
export default { state: { list: [] }, mutations: { updateList (state, list) => { // modify state state.list = list; } }, actions: { fetchSomeList() { // $.ajax().then(list => { // commit('A', list); // 调用 updateList mutations // }); } } }
- state:数据中心,类似Storage,比如多个页面公用一份数据,可以放在这里,比如用户角色、权限。
state: { userRole: [], }
- actons:异步任务在此执行,比如 ajax,在页面通过 dispatch 调用
- mutations:同步任务,比如修改 state,通过 commit 方式修改
-
如何在页面中调用 store module 中的数据
- 以 表格中 list 数据为例
- 页面通过
computed: { ...mapGetters(['home']) }
获得 home 的 state - 页面可以直接通过 this.home.list 调用 store home module 的数据