使用vuex存储用户信息到localStorage的实例

1、首先需要装vuex npm install vuex -d 2、新建store文件夹，新建index.js， 并引入vue、vuex,代码如下： import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const key = 'user' const store = new Vuex.Store({ state () { return { user: null } }, getters: { getStorage: function (state) { if (!state.user) { 在Vue.js应用中，管理全局状态通常采用Vuex这一状态管理库。Vuex提供了一种集中式的存储方式，便于在组件之间共享数据。本实例主要介绍如何利用Vuex来存储用户信息，并将其持久化到浏览器的localStorage中，以便在用户重新访问应用时仍然能保留这些信息。 我们需要安装Vuex。在命令行中运行`npm install vuex -d`，这将下载并添加Vuex作为开发依赖项。 接下来，创建一个名为`store`的文件夹，并在其中新建`index.js`文件。在这个文件中，我们将导入Vue和Vuex，并注册一个Vuex store。以下为`index.js`的部分代码： ```javascript import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const key = 'user' // 定义在localStorage中存储用户信息的键名 const store = new Vuex.Store({ state: () => ({ user: null // 初始化user状态为null }), getters: { getStorage: function (state) { if (!state.user) { state.user = JSON.parse(localStorage.getItem(key)) // 如果state.user为空，尝试从localStorage中读取user } return state.user } }, mutations: { $_setStorage (state, value) { state.user = value // 更新state.user localStorage.setItem(key, JSON.stringify(value)) // 将更新后的user保存到localStorage }, $_removeStorage (state) { state.user = null // 清空state.user localStorage.removeItem(key) // 从localStorage中移除user } } }) export default store ``` 在上述代码中，我们定义了一个名为`user`的状态，通过getter方法`getStorage`检查并恢复localStorage中的用户信息。同时，我们创建了两个mutation方法：`$_setStorage`用于设置用户信息，同时将其保存到localStorage；`$_removeStorage`用于清除用户信息，同时也从localStorage中删除。 在应用的主文件（通常是`main.js`）中，需要引入刚刚创建的store： ```javascript import store from './store/index' new Vue({ el: '#app', router, store, // 引入store components: { App }, template: '<App/>' }) ``` 当用户成功登录时，可以在登录组件中调用`commit`方法，将用户名提交到store并保存到localStorage： ```javascript this.$message({ message: '登录成功', type: 'success' }) this.$store.commit('$_setStorage', { user: this.loginForm.username }) // 提交user信息 this.$router.push({ name: 'Home' }) // 登录成功后跳转至首页 ``` 如果需要存储其他状态类信息，可以创建新的状态、getter和mutation，按照类似的方式操作。这样，无论用户何时何地重新打开应用，只要localStorage中的信息还在，就能恢复之前的状态。 通过Vuex和localStorage的结合，我们可以方便地管理和持久化Vue应用中的用户信息和其他关键状态，提升用户体验。这种方法尤其适用于需要保持用户登录状态或者个性化设置等跨页面共享数据的场景。