Vuex 的使用

1.vue的插件，增强了vue的功能
-在vue中实现集中式状态(数据)管理的一个vue插件，对vue应用中多个组件的共享状态进行集中式的管理(读/写)，也是一种组件间通信的方式，且适用于任意组件间通信

2.Vuex的使用流程
-state:存数据的地址
-actions:中转站
-mutations:真正改state数据的地方

3.使用
-在router/index.js中定义变量
'在组件中通过this.$store.state.age可以获取变量值'
-在组件中通过this.$store.dispatch('actions中定义的函数', 参数)，触发actions中的函数执行
-在actions的函数中，调用ontext.commit('mutations中定义的函数', 参数)，触发mutations中的函数执行
-在mutations中定义的函数是真正实现修改state数据的
-页面中如果使用的是$store.state.变量，变量发生变化，页面就变化，这样就实现了组件间的通信
'在组件中可以直接调用commit触发【mutations中定义的函数】'
'在组件中可以直接修改state中定义变量'

4.例子
export default new Vuex.Store({
    // 存变量
    state: {
        age: 18,
    },
    mutations: {
        add(state, num){
            state.age += num
        }
    },
    actions: {
        add(context, num){
            // 第一个参数是context，内部有commit和dispatch
            console.log(context, num)
            // 定义dispatch会触发mutation中函数执行
            context.commit('add', num)
        }
    },
})

Vue-router

Vue-router的基本使用

1.Vue-router是官方提供的用来实现SPA的vue插件，有了它，可以写不同的页面，通过地址栏不同的路径显示不同的页面组件
# https://router.vuejs.org/zh/index.html

2.使用
2.1新建router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from "@/components/Login";
// 使用路由插件
Vue.use(VueRouter)
// 配置路由
const routes = [
    {
        path: '/login',
        name:'login',
        component:Login,
    },
]

2.2main.js中使用
import router from './router'
new Vue({
    ...
    router,
    ...
}).$mount('#app')

2.3写页面组件，配置页面组件的路由，在App.vue中加入
<router-view></router-view>
# 在浏览器访问const routes中配置的路径，就能看到对应的页面组件了

路由的跳转与携带参数

1.跳转方法
1.1在html中使用
<router-link to="login">登录</router-link>
1.2在js中使用
this.$router.push('goods')

2.携带参数两种方法
2.1带在请求地址中
?name=lqz&age=19
2.2在地址中类似django的分组
/goods/1/

3.参数带在请求地址中
3.1携带参数
 <router-link to="/login/?name=barry&age=18">登录</router-link>
3.2组件中接收
created() {
  console.log(this.$route.query)
},

4.参数带在地址中
4.1携带参数
<router-link to="/login/barry">登录</router-link>
4.2修改路由(前面必须加:)
path: '/login/:id',
4.3组件中接收
created() {
  console.log(this.$route.params.id)
},

路由嵌套

1.在Goods组件中，写<router-view></router-view>
2.使用router-link标签跳转
3.只能变更Goods内<router-view>包裹的位置

4.在router/index.js相应的路由中嵌套
{
    path: '/goods',
    name: 'goods',
    component: Goods,
    children: [
        {
            path: '/detail',
            name: 'detail',
            component: GoodsDetail,
        },
        {
            path: '/list',
            name: 'list',
            component: GoodsList,
        },
    ]
},

路由守卫

1.在router/index.js中
1.1前置路由守卫
router.beforeEach((to, from, next) => {
    console.log('前置路由守卫', to, from)
    // 判断是否是访问购物车
    if (to.name == 'shoppingCart') {
        // 没有name就不允许访问
        let name = localStorage.getItem('name')
        if (name) {
            next()
        } else {
            alert('没有权限')
        }
    } else {
        next()
    }
})

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