先在我们终于讲到最后一个知识点vuex了。为什么要用vuex,在本项目里，使用vuex是为了保持网站的登录状态。比如我们index页面要求用户必须登录才能够访问，这里就要用vuex了。vuex实例化后叫store。
地址：vuex
安装
D:\test\book>yarn add vuex
在store文件夹下，新建index.js文件
代码如下：
import Vue from 'vue' import Vuex from 'vuex' // 引入js-cookie import Cookies from 'js-cookie' Vue.use(Vuex) const store = new Vuex.Store({ state: { name: '' }, mutations: { loginIn(state, name) { state.name = name // 设置过期时间为1天 Cookies.set('name', name, { expires: 1 }) }, loginOut(state) { state.name = '' Cookies.remove('name') } } }) export default store
我们定义了一个loginIn方法，调用这个方法，我们就可以把用户的用户名存在store中，同时也存在cookie里，cookie的有效期是1天。
配置
修改main.js，把store引入进去main.js中，然后在 new Vue 函数中配置
import store from './store/index.js' …… new Vue({ router, store, render: h => h(App), }).$mount('#app')
好啦，这时候我们就可以愉快的使用store了。
修改 Login.vue 的 onSubmit 方法，用户登录成功后，就把用户信息存在store中。
if (res.data.status === 1) { // 将用户信息存储在vuex中 this.$store.commit('loginIn', this.form.name) // 如果登录成功则跳转我index页面 this.$router.push('/index') } else { …… }
修改 Index.vue 页面，我们就可以在这个页面获取登录用户的用户名了。
Index.vue 代码如下：
<template> <div>这里是Index 页面，此时登录的用户是{{userName}}</div> </template> <style> </style> <script> export default { name: 'Index', data() { return { } }, computed: { userName() { return this.$store.state.name } }, } </script>
自此，一个我们常用vue项目基本上配置完成了。当然不同的项目，还有不同的组件需要安装，到时候你们再根据情况确定吧。
最后再讲一个关于路由拦截的问题。
15.路由拦截