【vue】Vuex 入门教程：状态管理和持久化解决方案

最新推荐文章于 2024-09-09 18:22:26 发布

LeGame游戏商店

最新推荐文章于 2024-09-09 18:22:26 发布

阅读量473

点赞数

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/2301_76635548/article/details/131007256

版权

Vuex是一个用于Vue.js应用的状态管理工具，提供响应式状态存储和通过commit处理状态变更。在Vue3中，通过安装Vuex，创建store，配置并使用store，可以在组件间共享数据。为了解决刷新后状态丢失的问题，可以使用vuex-persistedstate等插件实现状态持久化，保存到本地存储中。

摘要由CSDN通过智能技术生成

什么是vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它可以让我们在组件之间共享数据，实现组件之间的数据持久化。Vuex 的核心是一个 store，它是一个存储应用状态的容器，它有以下特点：

Vuex 的状态存储是响应式的，当 Vue 组件从 store 中读取状态时，如果 store 中的状态发生变化，那么相应的组件也会得到高效更新。
你不能直接修改 store 中的状态，唯一的途径就是显式地提交 mutation，这样可以方便地跟踪每个状态的变化，也可以实现一些调试工具来帮助我们更好地理解我们的应用。

如何使用vuex

在 Vue 3 中使用 Vuex 需要以下几步：

安装 Vuex：通过 npm 安装 vuex 包，在终端中运行以下命令：

npm install vuex

创建 Vuex Store：在项目中新建一个 store.js 文件，用于管理应用状态。例如，我们可以创建一个简单的计数器应用的 store：

import { createStore } from 'vuex'

// 创建一个新的 store 实例
const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

export default store

配置 Vuex：在 main.js 文件中引入 Vuex 并使用 app.use() 方法安装 Vuex。

import { createApp } from 'vue'
import store from './store'

const app = createApp({
  /* 根组件 */
})

// 将 store 实例作为插件安装
app.use(store)

在 Vue 组件中使用 Vuex：现在，你可以通过 this.$store 访问 store 实例。你可以从组件的计算属性中返回 store 中的状态，也可以从组件的方法中提交 mutation。例如，我们可以创建一个简单的计数器组件：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment')
    }
  }
}
</script>

vuex 的持久化问题

Vuex 的一个问题是当页面刷新后，store 中的状态会被重新初始化，之前存储的数据就会丢失。这样就不利于我们实现一些需要保存用户信息或者用户偏好设置等功能。为了解决这个问题，我们可以使用一些插件来实现 Vuex 的持久化存储。

使用 vuex-persistedstate 插件

vuex-persistedstate 是一个专门为 Vuex 设计的持久化插件，它可以将 store 中的状态保存到本地存储（localStorage 或者 sessionStorage）中，这样即使页面刷新或者关闭后，也能保留之前的状态。使用 vuex-persistedstate 插件需要以下几步：

安装 vuex-persistedstate 插件：

npm install vuex-persistedstate

在 store.js 文件中引入 vuex-persistedstate 插件，并在创建 store 实例时传入 plugins 选项：

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'

// 创建一个新的 store 实例
const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  plugins: [createPersistedState()]
})

export default store