VueX是一个前端数据状态管理库，帮助我们管理Vue程序中的状态数据。

安装

npm i vuex

引入 & 初始化

在main.js中

import { createStore } from 'vuex'

const store = createStore({
    state() {

    }, 
    getters: {

    },
    mutations: {
        
    }
});
app.use(store).mount('#app')

简单的说明下：

state() 定义存储哪些数据

getters 返回数据

mutations 增加/更新数据

保存用户数据的例子

const store = createStore({
    state() {
        return {
            user: {}
        }
    },
    getters: {
        user(state) {
            return state.user;
        }
    },
    mutations: {
        userLogin(state, currentUser) {
            state.user = currentUser;
        }
    }
});

在Vue组件中如何使用呢？

增加、更新数据：

store.commit('userLogin',{... });

获取数据：

let user = store.getters.user;

代码

<script setup>
import {useStore} from "vuex";
import {ref} from "vue";

const store = useStore();

const id = ref(null);
const username = ref(null);
const email = ref(null);

function updateUser() {
  store.commit('userLogin',{
    id: id.value,
    username: username.value,
    email: email.value
  });
}

function getUser() {
  let user = store.getters.user;
  console.log(user);
}

</script>

<template>
  login
  <div id="new-user">
    <input type="text" placeholder="Add a id.." id="userid" v-model="id">
    <input type="text" placeholder="Add a username.." id="username"  v-model="username">
    <input type="text" placeholder="Add an email.." id="email"  v-model="email">
    <input type="submit" id="submit-user" @click="updateUser" value="Submit">
  </div>

  <div>
    <input type="submit" id="getuser" @click="getUser" value="获取用户">
  </div>

</template>

<style scoped>

</style>

测试一下，更新、获取数据都没有问题。但是，此时你刷新页面，再次获取，会发现数据未定义。

数据消失了。这是因为：VueX store并未将数据持久化，（可以将它理解为内存，计算机重启即消失），刷新页面，数据就消失了。持久化方法很多，可以保存到数据库，或者保存到本地如localStorage。

1，当App初始化的时候，尝试加载localStorage中的数据

在main.js中

const app = createApp({
    extends: App,
    beforeCreate() {
        store.commit('initStore')
    }
})

store mutations中：

initStore(state) {
    if(localStorage.getItem('store')) {
        this.replaceState(JSON.parse(localStorage.getItem('store')));
    }
},

2，使用订阅事件，当数据变更的时候，持久化到localStorage

store.subscribe((mutation, state) => {
    localStorage.setItem('store', JSON.stringify(state));
})

这就是使用VueX及localStorage进行前端数据状态管理的基本方法了。

通常来说，我们应该将更多的数据本地化保存，特别是那些不易变化的数据。这样，可以极大的提高应用性能，提升用户体验。