Vuex的介绍和使用

最新推荐文章于 2024-08-13 15:00:04 发布

snakeZix

最新推荐文章于 2024-08-13 15:00:04 发布

阅读量231

点赞数

分类专栏：打开Vue的正确姿势文章标签： vue js

本文链接：https://blog.csdn.net/wucan111/article/details/113338076

版权

打开Vue的正确姿势专栏收录该内容

19 篇文章 0 订阅

订阅专栏

Vuex的介绍和使用

本文按照Vuex官网参考编写，写的是自己对其的理解，当然官网已经写的很好了，只是有些东西还是不太好理解，希望用自己的话解释一遍

Vue的单向数据流

单向数据流：在每个Vue的实例里，(数据源) State => (数据源更新触发视图更新) view => (用户操作视图) Actions => (操作行为改变对应数据源) State

什么是Vuex

由于Vue的单项数据流在处理实例之间的通信比较复杂，比如多个组件依赖同一状态时，当某一个组件状态改变时关联的多个组件对应状态应该一起改变，即使可以通过状态提升带父级组件，也会因为层层嵌套难以管理，导致不便于维护。因此需要一个专门为Vue设计的一个单例状态管理模式
这个模式就是Vuex，它采用集中式管理所有组件的状态，解决了上述问题

Vuex的简单版

对于上面说的问题，Vuex是可以完成，但是需要在编写代码的时候为了考虑各种问题，会将项目复杂化，因此我们需要考虑项目是否真的需要Vuex进行管理，因为它实在做了很多事情

如果不需要，那我们实现一个简易版的Vuex
其实原理就是共享数据源，绑定在需要共享的组件上，如果需要记录行为方便调试，可以尝试抽离出其行为即Actions，封装成一个对象，行为即方法

现在真正聊 Vuex

Vuex真的很简单：几个核心概念

State 数据源
Getters 数据源的派生状态
Mutations 突变
Actions 行为
Modules 模块

你可以这么理解它们

作为一个状态管理模式，肯定需要状态，那就是State 数据源
虽然可以从数据源获取到数据，但是如果即要保留源数据，有需要处理之后的数据，Getters就可以满足需求，比如列表排序（各种排序方式）、当前页面列表检索（数据过滤）
要更新数据源必须要相应的操作，这些操作叫 Mutations 突变，它被希望异步更新state，这样无法追踪行为
但是有的时候需要异步的更新数据源，但是又不希望将这种更新耦合在Vue组件中，于是出现了中间更新层Actions，它的存在就是为了解决异步的触发Mutations，并且要注意每个Action返回的值最后都会给store.dispatch，如果actions返回的是Promise，那么可以像组合Promise一样组合Action

最后一个概念看文档可能比较蒙：Module
其实从这个单词就差不多可以理解它为，将state数据源“分块”，就像前端路由一样，不希望所以路由都在一个根路由下，而是多级路由。

Vuex同样是这样，一个应用可能有多种状态，比如一个项目有全局配置状态管理、用户登录状态管理、页面数据缓存管理，就需要分割开各种状态，并且拥有自己的行为

vuex = {
    state: {},
    getters: {}
    mutations: {},
    actions: {},
    modules: {
        config: {
            state: {},
            getters: {}
            mutations: {},
            actions: {},
        },
        user: {
            state: {},
            getters: {}
            mutations: {},
            actions: {},
        },
        data: {
            state: {},
            getters: {}
            mutations: {},
            actions: {},
        }
    }
}