vue2.0手把手教你开发商户管理端后台（三）之如何使用vuex+sessionStorage保存登录信息

写在前面：

项目地址：GitHub - jianjiayi/Merchant: vue全家桶开发商户后台管理，vue2.0手把手教你开发商户管理端后台

有什么不明白的，可以发邮件给我：[email protected]

一、什么是vuex?

官方的解释是：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

VueX 是一个专门为 Vue.js 应用设计的状态管理架构，统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。

如果小伙伴真的不理解这个概念的话，可以看下官网：Vuex | API 参考

二、安装vuex

1、在项目根目录下执行：cnpm install vuex --save

    安装完成后修改main.js,添加如下代码：

0001

三、使用vuex

1、在src文件下新建store目录，并创建两个文件 : index.js和user.js;

0002

2、编辑src/store/index.js：

0003

3、编辑src/store/user.js:

0004

4、修改login.vue组件：

0005

5、再去修改下main.js路由守卫部分代码：

0006

好了，现在重新启动下项目吧！npm run dev

随便输入用户名+6位密码，点击登录。成功了

0007

6、实现注销登录

修改header.vue组件：

0008

现在的效果图：

0009

好了，现在点击安全退出就实现了吧！。

四、那么如何打包呢？

我们在项目根目录下，执行:npm run build

0010

再看下文件夹，是不是多了一个叫dist的目录，这个目录就是我们组中要发布的文件：

0011

我们点开dist目录，我们看下文件结构：

0012

一目了然，这个index.html就应该是入口文件了，static文件夹就是用来放静态资源的

我们尝试点击index.html在浏览器看下，居然什么都没有，一片空白，这是什么鬼？

0013

看这个应该是文件路径出了问题，没有找到。现在想到是不是配置文件有问题呢，答案是的！在config/index.js中这里与一个build的配置：

0014

现在在根目录下执行下：npm run build 打包完，打开dist/index.html，是不是就可以了。