神刀安全网

vue2.0手把手教你开发商户管理端后台(三)之如何使用vuex+sessionStorage…

写在前面:

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

有什么不明白的,可以发邮件给我:m13121378101@163.com

一、什么是vuex?

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

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

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

二、安装vuex

1、在项目根目录下执行:cnpm install vuex –save

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

vue2.0手把手教你开发商户管理端后台(三)之如何使用vuex+sessionStorage...

0001

三、使用vuex

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

vue2.0手把手教你开发商户管理端后台(三)之如何使用vuex+sessionStorage...

0002

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

vue2.0手把手教你开发商户管理端后台(三)之如何使用vuex+sessionStorage...

0003

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

vue2.0手把手教你开发商户管理端后台(三)之如何使用vuex+sessionStorage...

0004

4、修改login.vue组件:

vue2.0手把手教你开发商户管理端后台(三)之如何使用vuex+sessionStorage...

0005

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

vue2.0手把手教你开发商户管理端后台(三)之如何使用vuex+sessionStorage...

0006

好了,现在重新启动下项目吧!npm run dev

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

vue2.0手把手教你开发商户管理端后台(三)之如何使用vuex+sessionStorage...

0007

6、实现注销登录

修改header.vue组件:

vue2.0手把手教你开发商户管理端后台(三)之如何使用vuex+sessionStorage...

0008

现在的效果图:

vue2.0手把手教你开发商户管理端后台(三)之如何使用vuex+sessionStorage...

0009

好了,现在点击安全退出就实现了吧!。

四、那么如何打包呢?

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

vue2.0手把手教你开发商户管理端后台(三)之如何使用vuex+sessionStorage...

0010

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

vue2.0手把手教你开发商户管理端后台(三)之如何使用vuex+sessionStorage...

0011

我们点开dist目录,我们看下文件结构:

vue2.0手把手教你开发商户管理端后台(三)之如何使用vuex+sessionStorage...

0012

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

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

vue2.0手把手教你开发商户管理端后台(三)之如何使用vuex+sessionStorage...

0013

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

vue2.0手把手教你开发商户管理端后台(三)之如何使用vuex+sessionStorage...

0014

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

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » vue2.0手把手教你开发商户管理端后台(三)之如何使用vuex+sessionStorage…

分享到:更多 ()