vue2.0使用vuex store保存登录用户名并显示到页面中且在页面中进行更改

vue2.0使用vuex store保存登录用户名并显示到页面中且在页面中进行更改

step1: 在Vuex Store中设置状态state和mutation(更改状态的方法)

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
  username: localStorage.getItem('username') || '', // 获取本地存储的用户名，如果没有则为空字符串
}

const mutations = {
  SET_USERNAME(state, username) {
    state.username = username;
    localStorage.setItem('username', username); // 更新localStorage中的用户名
  },
}
export default new Vuex.Store({
  state,
  mutations,
})

step2: 创建一个getter获取用户名（可选，但推荐，便于组件中直接调用）

// getters.js
export const getUsername = state => state.username;

step3: 在组件中展示用户名(Vue组件中，需要注入store，并在计算属性或挂载钩子中获取state中的用户名，并将其绑定到视图上)

// Header.vue 或需要显示用户名的任何组件
<template>
  <div>
    <input v-model="currentUsername" @change="updateUsername" placeholder="请输入用户名">
    <!-- 显示用户名 -->
    <p>当前用户名：{{ displayedUsername }}</p>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex';

export default {
  computed: {
    ...mapState(['username']), // 直接映射state中的username
    ...mapGetters(['getUsername']), // 如果你定义了getter也可以使用
    displayedUsername: {
      get() {
        return this.getUsername; // 或者 this.username;
      }
    },
  },
  data() {
    return {
      currentUsername: this.getUsername, // 初始时将用户名赋值给输入框
    };
  },
  methods: {
    updateUsername() {
      this.$store.commit('SET_USERNAME', this.currentUsername); // 用户名更改后提交mutation更新状态
    },
  },
};
</script>

当在页面上更改currentUsername时，通过@change事件触发updateUsername方法，该方法会提交一个mutation来更新Vuex Store中的用户名，同时这个新的用户名会被同步到localStorage。 页面上的显示部分也会随之自动更新，因为它们与store的状态是绑定的。