怎么在vue2.0中实现登陆Vuex

在 Vue2.0 中使用 Vuex 实现登录，可以将登录状态和用户信息存储在 Vuex 的 store 中，以便在应用的任何地方都可以访问和使用。

下面是一个简单的示例代码：

1. 创建 store.js 文件，定义 store 中的 state、mutations 和 actions：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    isLoggedIn: false,
    user: {}
  },
  mutations: {
    login (state, user) {
      state.isLoggedIn = true
      state.user = user
    },
    logout (state) {
      state.isLoggedIn = false
      state.user = {}
    }
  },
  actions: {
    login ({ commit }, { username, password }) {
      return axios.post('/api/login', { username, password })
        .then(response => {
          const user = response.data.user
          localStorage.setItem('token', response.data.token)
          commit('login', user)
          return user
        })
    },
    logout ({ commit }) {
      localStorage.removeItem('token')
      commit('logout')
    }
  }
})

2. 在登录页面中，使用 Vuex 的 mapActions 辅助函数将 login 方法映射到组件的 methods 中：

<template>
  <div>
    <input type="text" v-model="username" placeholder="请输入用户名"/>
    <input type="password" v-model="password" placeholder="请输入密码"/>
    <button @click="handleLogin">登录</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    ...mapActions(['login']),
    handleLogin () {
      this.login({ username: this.username, password: this.password })
        .then(user => {
          // 登录成功，跳转到首页或其他页面
          this.$router.push('/')
        })
        .catch(error => {
          // 登录失败，提示错误信息
          alert(error.response.data.message)
        })
    }
  }
}
</script>

3. 在应用的任何地方，都可以通过 Vuex 的 mapState 辅助函数或 $store.state 来访问登录状态和用户信息：

<template>
  <div>
    <p v-if="isLoggedIn">欢迎，{{ user.name }}！</p>
    <button v-if="isLoggedIn" @click="handleLogout">退出登录</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['isLoggedIn', 'user'])
  },
  methods: {
    ...mapActions(['logout']),
    handleLogout () {
      this.logout()
        .then(() => {
          // 退出登录成功，跳转到登录页面
          this.$router.push('/login')
        })
    }
  }
}
</script>