Vuex

1. 首先，让我们创建一个Vuex模块来管理用户状态。在store目录下创建一个user.js文件：

// store/user.js

export const state = () => ({
  isLoggedIn: false,
  userInfo: null
})

export const mutations = {
  setLoginStatus(state, status) {
    state.isLoggedIn = status
  },
  setUserInfo(state, info) {
    state.userInfo = info
  }
}

export const actions = {
  login({ commit }, userInfo) {
    // 模拟登录操作
    localStorage.setItem('userInfo', JSON.stringify(userInfo))
    commit('setLoginStatus', true)
    commit('setUserInfo', userInfo)
  },
  logout({ commit }) {
    localStorage.removeItem('userInfo')
    commit('setLoginStatus', false)
    commit('setUserInfo', null)
  },
  initializeAuth({ commit }) {
    const userInfo = localStorage.getItem('userInfo')
    if (userInfo) {
      const parsedUserInfo = JSON.parse(userInfo)
      commit('setLoginStatus', true)
      commit('setUserInfo', parsedUserInfo)
    }
  }
}

export const getters = {
  isLoggedIn: state => state.isLoggedIn,
  userInfo: state => state.userInfo
}

2. 在store/index.js中注册这个模块：

// store/index.js

export const modules = {
  user: require('./user.js')
}

3. 现在，让我们创建登录页面。在pages目录下创建一个login.vue文件：

<!-- pages/login.vue -->
<template>
  <div>
    <h1>登录</h1>
    <input v-model="username" placeholder="用户名" />
    <input v-model="password" type="password" placeholder="密码" />
    <button @click="handleLogin">登录</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleLogin() {
      // 这里应该有实际的登录逻辑，现在我们只是模拟
      const userInfo = { username: this.username }
      this.$store.dispatch('user/login', userInfo)
      this.$router.push('/')
    }
  }
}
</script>

4. 修改components/appheader.vue文件，使其使用Vuex中的用户状态：

<!-- components/appheader.vue -->
<template>
  <header>
    <h1>我的应用</h1>
    <div v-if="isLoggedIn">
      欢迎，{{ userInfo.username }}
      <button @click="handleLogout">登出</button>
    </div>
    <div v-else>
      <nuxt-link to="/login">登录</nuxt-link>
    </div>
  </header>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters('user', ['isLoggedIn', 'userInfo'])
  },
  methods: {
    handleLogout() {
      this.$store.dispatch('user/logout')
      this.$router.push('/login')
    }
  }
}
</script>

5. 修改layouts/default.vue文件：

<!-- layouts/default.vue -->
<template>
  <div>
    <app-header />
    <nuxt />
  </div>
</template>

<script>
import AppHeader from '~/components/appheader.vue'

export default {
  components: {
    AppHeader
  }
}
</script>

6. 创建首页。在pages目录下创建一个index.vue文件：

<!-- pages/index.vue -->
<template>
  <div>
    <h2>首页内容</h2>
    <div v-if="isLoggedIn">
      <p>你好，{{ userInfo.username }}！这是你的个人首页。</p>
    </div>
    <div v-else>
      <p>请先登录以查看个人内容。</p>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters('user', ['isLoggedIn', 'userInfo'])
  }
}
</script>

7. 最后，我们需要在应用启动时初始化认证状态。在layouts/default.vue中添加：

<!-- layouts/default.vue -->
<script>
import AppHeader from '~/components/appheader.vue'

export default {
  components: {
    AppHeader
  },
  created() {
    this.$store.dispatch('user/initializeAuth')
  }
}
</script>

这个设置实现了以下功能：

• 用户可以在登录页面登录。
• 登录信息保存在localStorage中。
• Vuex store管理登录状态。
• AppHeader组件显示登录状态和用户信息。
• 首页根据登录状态显示不同内容。
• 应用启动时会检查localStorage并初始化登录状态。

请注意，这只是一个基本的实现。在实际应用中，您还需要添加更多的安全措施，如使用HTTPS、实现proper的后端认证、使用更安全的存储方式等。

如果您需要更多解释或有任何其他问题，请随时告诉我。