uniapp怎么用vuex实现登录功能

1. 什么是vuex

vuex是一个专为Vue.js应用程序开发的状态管理模式。简单来说，就是在vue组件之间共享存储空间来实现状态管理，使得状态共享更加方便、高效、易于维护。

在uniapp中，因为它是基于Vue.js框架的，因此也可以使用vuex来实现状态管理。这在实现登录功能中可以发挥重要作用。下面我们就一步步来了解下如何在uniapp中使用vuex实现登录功能。

2. 安装和配置vuex

安装和配置vuex只需要几步操作：

2.1 安装vuex

npm install vuex --save

2.2 创建store目录

我们在src目录下创建一个store目录，用于存放vuex相关文件。

2.3 创建一个store实例

在store目录下创建一个index.js文件，并输入以下代码：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    userInfo: null,
    isLogin: false
  },
  mutations: {
    setUserInfo(state, userInfo) {
      state.userInfo = userInfo;
      if (userInfo) {
        state.isLogin = true;
      } else {
        state.isLogin = false;
      }
    },
    logout(state) {
      state.userInfo = null;
      state.isLogin = false;
      uni.removeStorageSync('userInfo');
    },
  },
})
export default store

解析：

state：该对象包含了我们的应用中需要管理的状态，下面我们定义了两个状态userInfo和isLogin，默认值均为null和false。

mutations：它包含了一些更改状态的方法（函数）。通过执行这些函数，我们可以改变state中的值。这里我们定义了两个方法setUserInfo和logout。

3. vuex在login页面中的使用

3.1 mutations中的setUserInfo方法

我们在login页面中定义一个login方法，用axios请求接口，获取返回的用户信息。如果请求成功，则将接口返回的用户信息set到vuex的state中，并将isLogin值设置为true。如果请求失败，则isLogin值保持为false。

<script>
import { mapMutations } from 'vuex';
import API from '@/common/js/api';
export default {
  name: '',
  data() {
    return {
      userName: '',
      password: '',
    }
  },
  methods: {
    ...mapMutations(['setUserInfo']),
    login(){
      const params = {
        userName: this.userName,
        password: this.password,
      }
      API.login(params)
        .then((res) => {
          this.setUserInfo(res.data);
          uni.setStorageSync('userInfo', res.data);
          uni.switchTab({
            url: '/pages/index/index'
          });
        })
        .catch((error) => {
          uni.showToast({
            title: error.message || '登录失败',
            icon: 'none',
            duration: 2000,
          })
        });
    }
  }
}
</script>

3.2 mutations中的logout方法和根据state中的isLogin显示页面

我们在App.vue中添加一个computed属性isLogin，根据vuex中的isLogin状态值计算出来。如果isLogin为true，则显示center组件，否则则显示login组件。

同时，我们在App.vue的methods中定义一个logout方法，用于清空vuex的userInfo状态以及清空本地缓存中的userInfo。在center组件中，我们通过访问vuex中的userInfo状态，来获取用户信息并显示在页面上。

// App.vue
<template>
  <div>
    <login v-if="!isLogin" />
    <center v-else />
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import Login from '@/components/login';
import Center from '@/components/center';
export default {
  components: {
    Login,
    Center,
  },
  computed: {
    ...mapState(['isLogin']),
  },
  methods: {
    ...mapMutations(['logout']),
    exit(){
      uni.showModal({
        title: '退出登录',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            this.logout();
            uni.switchTab({
              url: '/pages/index/index',
            });
          }
        }
      });
    },
  }
}
</script>

4. 总结

到这里，我们就完成了利用vuex来实现登录功能的步骤。使用vuex后，我们能够将需要共享的状态存储在同一个地方，使得多个组件之间可以共享这些状态，方便、高效、易于维护。

小提示：当应用程序较为复杂时，我们可以将mutations、getters、actions等方法单独定义在一个js文件中，再将其引用到store的index.js中。这样可以更好地管理和维护代码。