Vue.js核心技术解析与uni-app跨平台实战开发学习笔记 第10章 Vuex状态管理 10.7 Vuex实例之登录退出

Vue.js核心技术解析与uni-app跨平台实战开发学习笔记

第10章 Vuex状态管理

Vuex相当于一个数据仓库，所有组件都可以到仓库中存取数据。

10.7 Vuex实例之登录退出

一个栗子：使用Vuex实现登录和退出功能，输入用户名和密码后，修改Vuex中的状态并使用localStorage本地存储实现数据持久化，登录成功后即可实现退出功能。

10.7.1 vue-cli创建项目站点

vue init webpack vuexlogin
1

等待项目构建完成

使用vscode打开目录

新建login组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

修改路由匹配规则

运行项目，访问/login

10.7.2 Vuex修改登录状态

安装Vuex

在store文件夹下新建index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

var store = new Vuex.Store({
    state : {
        // 0 表示未登录，1 表示已登录
        islogin : 0
    }
})

export default store
1
2
3
4
5
6
7
8
9
10
11
12
13

在main.js中引用Vuex

挂载后就可以在任何页面调用Vuex中的数据了。

创建doLogin登录表单组件

修改路由匹配规则，访问/doLogin时展示doLogin组件

修改doLogin登录组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

HelloWorld组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import login from '@/components/login'
import doLogin from '@/components/doLogin'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name : 'HelloWorld',
      component : HelloWorld
    },
    {
      path: '/login',
      name: 'login',
      component: login
    },
    {
      path: '/doLogin',
      name : 'doLogin',
      component : doLogin
    }
  ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

var store = new Vuex.Store({
    state : {
        // // 0 表示未登录，1 表示已登录
        // islogin : 0
        islogin : localStorage.getItem('islogin')
    },
    mutations :{
        doLogin(state){
            state.islogin = 1
            localStorage.setItem('islogin',1)
        },
        dologout(state){
            state.islogin = 0
            localStorage.removeItem('islogin')
        }
    }
    
})

export default store
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

设置本地存储localStorage

localStorage.setItem(‘islogin’,1) ： 第一个参数是自定义属性名，第二个参数是存储值

获取本地存储使用：localStorage.getItem(‘islogin’) , islogin为属性名

移除本地存储使用：localStorage.removeItem(‘islogin’)，islogin为属性名

运行效果