vue应用结构

组件树和store

vue-router

• <router-view><router-view/>是占位符，放在需要显示路由视图的地方
• 子组件里面的<router-view><router-view/>需要配置子路由
• <router-link to="/">是vue封装的路由跳转，本质上是a标签

vuex

vuex流程图

• actions、mutations就像事件，需要dispatch、commit去触发

  概念

  • state： 存放数据的地方，页面数据最好都统一放在这里。相当于组件中的data
  • getters: 也可以理解为属性数据，相当于组件中的computed计算属性
  • actions： 通常是处理异步操作的地方，比如请求后端数据，需要在组件内通过 dispatch('actionName',payload)来触发。
  • mutations： 同步修改state中的数据，state中的数据只能通过mutations来修改。通过commit('mutationName',payload)，在组件内触发或在actions中触发，但一定是同步操作。
  • 修改后的数据通过view渲染
  • dispatch、commit只接受两个参数，函数名和payload，需要传的数据封装为一个对象通过payload传进来