前言
本篇文章来讲解uniapp中如何使用vuex来实现状态管理，后面会讲实现登录状态管理的案例。如果之前学过vuex全家桶的同学那应该没啥问题，在uniapp中使用vuex和vue中基本是一样的。
什么是vuex
简单来说就是vue中的状态管理仓库，对于vuex我之前写了两篇文章进行了详细介绍，可以点下面链接进行阅读查看：
Vuex从了解到实际运用，彻底搞懂什么是Vuex（一）
Vuex从了解到实际运用（二），获取vuex中的全局状态（state，getters）
Vuex官方文档：链接
在uniapp中使用vuex
新建store
首先我们需要新建store文件夹，在文件夹下新建index.js文件，存放vuex核心代码：
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
// 用来缓存数据
},
mutations: {
// 事件
}
})
export default store
然后需要在根目录下的main.js文件中进行挂载，方便全局使用：
import store from './store/index.js'
Vue.prototype.$store = store
这样一来在项目中使用vuex的基础配置就完成了，剩下就是进行相应的使用操作
模拟登录案例
下面我们使用vuex在uniapp中实现一个模拟登录的案例，主要就是在store中进行变量的读取与更改：
首先我们先在state中定义我们需要的变量：
./store/index.js：
state中定义数据，mutations中定义改变登录值的函数
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
// 用来缓存数据
name: 'jack',
isLogin: false, //判断是否已登录
},
mutations: {
// 改变isLogin的值
setLogin(state, payload) {
state.isLogin = payload;
}
}
})
export default store
然后开始写登录页面:
在计算属性中通过mapState拿到store中state的值，然后编写登录和注销的函数进行相关的操作
因为已经将store全局挂载，所以直接可以使用this.$store.commit读取到mutations中的函数
<template>
<view class="login">
<view>
登录状态： {
{
isLogin}}
</view>
<button type="default" @click="login">登录</button>
<button type="default" @click="logout">注销</button>
<navigator url="../index/index">首页</navigator>
</view>
</template>
<script>
import {
mapState} from 'vuex'
export default {
computed: {
...mapState(['name','isLogin'])
},
methods: {
// 登录
login() {
this.$store.commit('setLogin', true);
},
// 登出 注销
logout() {
this.$store.commit('setLogin', false);
}
}
}
</script>
这里的逻辑是：如果是登录状态，则可以正常点击首页进行跳转，否则点击首页无法跳转
所以我们需要在首页进行检查登录的状态：
主要是在onload和onshow生命周期函数中进行登录状态的检查，如果没有登录则跳回原登录界面
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{
{
title}}</text>
<text>{
{
name}}</text>
<text>{
{
isLogin}}</text>
</view>
</view>
</template>
<script>
import {
mapState} from 'vuex'
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
this.checkLogin();
},
onShow() {
this.checkLogin();
},
computed: {
...mapState(['name','isLogin'])
},
methods: {
checkLogin() {
if (!this.$store.state.isLogin) {
uni.navigateTo({
url:"../login/login"
})
}
}
}
}
</script>
实现效果：
- 登录状态的切换
2.验证登录状态跳转页面
最后
本篇文章就讲到这里结束啦，最后模拟登录的案例只是为了让大家学会怎么在uniapp中使用vuex读写数据，功能简化了很多，实际开发中当然要复杂很多，不过学会了基础，后面也不难啦。本文是基础学习，后期会给大家带来实战开发中的相关写法，感兴趣可以订阅专栏进行学习~
