python笔记(Vue 前后端分离小项目,Vuex:state,Mutation,actions)

ElenmentUI的使用
安装Elenment
引入Elenment
main.js

python笔记(Vue 前后端分离小项目,Vuex:state,Mutation,actions)

  1. 页面结构图
    python笔记(Vue 前后端分离小项目,Vuex:state,Mutation,actions)

  2. [生命周期]

    (https://cn.vuejs.org/v2/guide/instance.html#生命周期图示)

  3. 路由请求

    APP.vue
    python笔记(Vue 前后端分离小项目,Vuex:state,Mutation,actions)
    Vheader.vue
    python笔记(Vue 前后端分离小项目,Vuex:state,Mutation,actions)
    python笔记(Vue 前后端分离小项目,Vuex:state,Mutation,actions)
    切换路由
    python笔记(Vue 前后端分离小项目,Vuex:state,Mutation,actions)
    路由切换保持状态
    python笔记(Vue 前后端分离小项目,Vuex:state,Mutation,actions)

  4. Vuex

    main.js配置
    python笔记(Vue 前后端分离小项目,Vuex:state,Mutation,actions)

  5. vuex单独state的使用

    main.js python笔记(Vue 前后端分离小项目,Vuex:state,Mutation,actions)
    APP.vue
    数据获取(自定义数据)
    python笔记(Vue 前后端分离小项目,Vuex:state,Mutation,actions)
    ajax请求数据
    python笔记(Vue 前后端分离小项目,Vuex:state,Mutation,actions)
    VnoteList.vue
    显示数据
    python笔记(Vue 前后端分离小项目,Vuex:state,Mutation,actions)
    VnoteItem.vue
    python笔记(Vue 前后端分离小项目,Vuex:state,Mutation,actions)
    Vmarked.vue
    提交数据
    python笔记(Vue 前后端分离小项目,Vuex:state,Mutation,actions)
    python笔记(Vue 前后端分离小项目,Vuex:state,Mutation,actions)
    获取值
    python笔记(Vue 前后端分离小项目,Vuex:state,Mutation,actions)
    提交到后端
    python笔记(Vue 前后端分离小项目,Vuex:state,Mutation,actions)

  6. mutation+state的使用

    main.js
    python笔记(Vue 前后端分离小项目,Vuex:state,Mutation,actions)

    获取数据python笔记(Vue 前后端分离小项目,Vuex:state,Mutation,actions)
    添加数据
    Vmark.vue
    python笔记(Vue 前后端分离小项目,Vuex:state,Mutation,actions)
    main.js
    python笔记(Vue 前后端分离小项目,Vuex:state,Mutation,actions)

  7. mutation+state+actions的使用(正规使用方法)
    Vmark.vue
    python笔记(Vue 前后端分离小项目,Vuex:state,Mutation,actions)

    main.js
    python笔记(Vue 前后端分离小项目,Vuex:state,Mutation,actions)