vue学习笔记

今日内容概要

• Vuex的使用
• Vue-router的使用

今日内容详细

Vuex的使用

Vuex：vue的插件，增强了vue的功能。在vue中实现集中式状态（数据）管理的一个vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任何组件间通信。

创建文件：src/store/index.js

#引入Vue核心库
   import Vue from 'vue'
#引入Vuex
   import Vuex from 'vuex'
#应用Vuex插件
   Vue.use(Vuex)

state：保存具体的数据
actions：服务员，中转站，响应组件中用户的动作
mutations：真正修改state数据的地方

在main.js中创建vm时传入store配置项

# 引入store
import store from './store'
# 创建vm
new Vue({
  store:store,
  render: h => h(App)
}).$mount('#app')

使用步骤：

1. 在state中定义变量
2. 在组件中通过this.$store.dispatch('actions中定义的函数')，触发actions中的函数执行
3. 在actions中的函数中，调用context.commit('mutations中定义的函数')
4. 在mutations中定义的函数实现真正的修改state中的数据
5. 页面中只要使用$store.state.变量，变量变化，页面就变化，实现了组件间通信

注意：
    在组件中可以直接调用commit触发【mutations中定义的函数】。
    在组件中可以直接修改state中定义变量。

代码演示：

import Vue from 'vue'
import Vuex from 'vuex' // 安装过了，直接导入
import state from "@/store/state";
Vue.use(Vuex)  // 使用Vuex插件

export default new Vuex.Store({
    // 真正的存变量
    state: {age:19,shoppingNum:0},
    mutations: {
        ADD(state, num) {
            console.log('###', num)
            state.age+=num
        },
        addShoppingCart(state,obj){
            state.shoppingNum+=1
        }
    },
    actions: {
        add(context, num) {
            //第一个参数传入contex，内部有 commit和dispatch
            //调用dispatch会触发actions中函数执行
            console.log('---', context, num)

            //调用commit会触发【mutations】中函数执行
            // 在这里发送axios请求去后端（token:放在cookie中），查询是否有权限，如果有再改值
            // cookies.get()
            // axios.get('').then(res=>{
            //     // 如果有权限
            // })
            context.commit('ADD',num)
            // context.dispatch()
        },
        addShoppingCart(context,obj){
            context.commit('addShoppingCart')
        }
    },
})

vuex的执行流程图：

Vue-router的使用

官方提供的用来实现SPA 的vue 插件:有了它以后，我们可以写很多页面组件，通过地址栏不同的路径显示不同的页面组件。

github: https://github.com/vuejs/vue-router

中文文档: http://router.vuejs.org/zh-cn/

下载: npm install vue-router --save

基本使用：

# 使用步骤
1. 新建router/index.js
    import Vue from 'vue'
    import VueRouter from 'vue-router'

    Vue.use(VueRouter)
    const routes = [配置路由1,配置路由2]
2. main.js中使用
   import router from './router'
        new Vue({
            ...
              router,
            ...
            }).$mount('#app')
3. 只需要写页面组件，配置路由即可
4. 在App.vue中加入
    <router-view>

    </router-view>
5. 在浏览器访问const routes中配置的路径，就能看到对应的页面组件了

路由的跳转

在html中使用
    <router-link :to="path">去登录</router-link>
在js中使用
    this.$router.push('goods')

路由跳转携带参数

# 两种情况
-带在请求地址中以 ?name=lqz&age=19
-在地址中类似于django的分组  /goods/1/

# 情况1：请求地址中
-<router-link to="/login/?name=lqz&age=19">去登录</router-link>
-组件中接受：this.$route.query.取

# 情况2：地址中
-<router-link to="/login/lyf">去登录</router-link>
-组件中接受：this.$route.params.取

路由嵌套

# 使用步骤：
1 router/index.js 相应的路由中
  {
      path: '/goods',
      name: 'goods',
      component: Goods,
      children: [
          {
              path: 'list',
              component: GoodList
          },
          {
              path: 'detail',
              component: GoodDetail
          }
      ]
  },
2 必须要在Goods组件中，写<router-view></router-view>
3 使用router-link标签跳转
4 只会变更Goods下router-view包裹的位置

路由守卫

# 对路由进行权限控制

# 前置路由守卫
router.beforeEach((to, from, next) => {
    console.log('前置路由守卫', to, from)

    if (to.name == 'shoppingcart') {
        let name = localStorage.getItem('name')
        if (name) {
            next()
        } else {
            alert('不好意思没有权限')
        }
    } else {
        next()
    }
})

# 后置路由守卫
router.afterEach((to,from)=>{
    console.log('后置路由守卫',to,from)
    document.title = to.name
})