uni-app微信小程序登录并使用vuex存储登录状态

以下是一个示例代码，展示如何在 uni-app 中使用 vuex 存储登录状态和实现微信小程序登录功能：

1. 创建 store 文件夹，在其中创建 index.js 文件，用于初始化 vuex store 和定义相关状态和操作。

// store/index.js

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    isLoggedIn: false, // 登录状态
    userInfo: null // 用户信息
  },
  mutations: {
    setLoginState(state, isLoggedIn) {
      state.isLoggedIn = isLoggedIn
    },
    setUserInfo(state, userInfo) {
      state.userInfo = userInfo
    }
  },
  actions: {
    login({ commit }, code) {
      // 调用登录接口，获取用户信息
      // 以下代码仅为示例，你需要根据实际情况进行修改
      return new Promise((resolve, reject) => {
        uni.login({
          success: res => {
            // 传递登录凭证给后端服务器
            // 此处使用 setTimeout 模拟异步请求
            setTimeout(() => {
              const userInfo = {
                id: 1,
                username: 'testUser'
              }
              commit('setUserInfo', userInfo)
              commit('setLoginState', true)
              resolve()
            }, 1000)
          },
          fail: err => {
            reject(err)
          }
        })
      })
    },
    logout({ commit }) {
      // 执行登出操作，清除登录状态和用户信息
      // 以下代码仅为示例，你需要根据实际情况进行修改
      return new Promise((resolve, reject) => {
        // 清除登录状态和用户信息
        commit('setUserInfo', null)
        commit('setLoginState', false)
        resolve()
      })
    }
  }
})

export default store

2. 在 main.js 文件中引入 store 并挂载到 vue 实例上。

// main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

3. 在登录页面或组件中，使用 vuex 的登录相关状态和操作。

      登录    退出登录   {
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        })
      }).catch(err => {
        uni.showToast({
          title: '登录失败',
          icon: 'none'
        })
        console.error(err)
      })
    },
    handleLogout() {
      this.logout().then(() => {
        uni.showToast({
          title: '退出登录成功',
          icon: 'success'
        })
      }).catch(err => {
        uni.showToast({
          title: '退出登录失败',
          icon: 'none'
        })
        console.error(err)
      })
    }
  }
}
" _ue_custom_node_="true">