快速掌握Vue3.0中如何上手Vuex状态管理

更新时间：2021年05月20日 09:00:31 作者：JackieDYH

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，本文给大家分享Vue3.0中快速上手Vuex状态管理的方式，本文通过实例代码讲解的很详细，对大家学习Vuex状态管理相关知识有很大的帮助，感兴趣的朋友一起学习吧

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

一、State

由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态：

import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
  setup () {
    const store = useStore()
    return {
      count: computed(() => store.state.count)
    }
  }
}

二、Getters

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
  setup () {
    const store = useStore()
    return {
      double: computed(() => store.getters.double)
    }
  }
}

三、Mutations

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

const store = createStore({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

你不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为 increment 的 mutation 时，调用此函数。”要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法：

store.commit('increment')

四、Actions

Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

Action 通过 store.dispatch 方法触发：

store.dispatch('increment')

五、Modules

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}
const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}
const store = createStore({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

六、vuex-persistedstate

当刷新页面,项目重新加载,vuex 会重置,所有状态回到初始状态,使用 vuex-persistedstate 可以避免这种情况。

1、安装

npm install --save vuex-persistedstate

2、使用

import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";
const store = new Vuex.Store({
  plugins: [createPersistedState()],
});

以上就是Vue3.0中如何快速上手Vuex状态管理的详细内容，更多关于Vuex状态管理的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

详解Vue数据驱动原理
这篇文章主要介绍了详解Vue数据驱动原理的相关资料，帮助大家更好的理解和学习vue框架的相关知识，感兴趣的朋友可以了解下
2020-11-11
测试平台开发vue组件化重构前端代码
这篇文章主要为大家介绍了测试平台开发vue组件化重构前端代码，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-05-05
Vue项目Nginx子目录部署(Vite和Vue-CLI)
本文主要介绍了Vue项目Nginx子目录部署(Vite和Vue-CLI),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-05-05
vuex页面刷新数据丢失问题的四种解决方式
vuex是大家使用vue时大多数都会选择的,但是当页面刷新之后vuex数据会丢失,下面这篇文章主要给大家介绍了关于vuex页面刷新数据丢失问题的四种解决方式,需要的朋友可以参考下
2022-02-02
vue+springboot上传大文件的实现示例
本文主要介绍了vue+springboot上传大文件的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
一步步讲解Vue如何启动项目
这篇文章主要给大家介绍了关于Vue如何启动项目的相关资料,还介绍了解决vue启动项目时间很长问题的相关方法,文中通过图文介绍的非常详细,需要的朋友可以参考下
2023-02-02
Vue3父子组件间传参通信的四种方式
近期学习vue3的父子组件之间的传值,发现跟vue2的并没有太大的区别,下面这篇文章主要给大家介绍了关于Vue3父子组件间传参通信的四种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-05-05
vuex 使用文档小结篇
Vuex 是一个专为Vue.js应用程序开发的状态管理模式，集中式存储管理应用的所有组件状态。本文给大家介绍了vuex使用文档，需要的朋友参考下吧
2018-01-01
Vue实现docx、pdf格式文件在线预览功能
在业务中，如果遇到文档管理类的功能，会出现需要在线预览的业务需求，本文主要是通过第三方库来实现文档预览功能，并将其封装成preview组件,感兴趣的可以了解一下
2022-09-09
使用vue根据状态添加列表数据和删除列表数据的实例
今天小编就为大家分享一篇使用vue根据状态添加列表数据和删除列表数据的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09