美文网首页
Vuex——状态管理

Vuex——状态管理

作者: inyourface | 来源:发表于2020-03-09 13:41 被阅读0次

前言:项目中有使用Vuex,通过官网进行学习,现进行总结。

Vuex--状态管理模式

状态管理模式包含以下几个部分:

  • state: 驱动应用的数据源
  • view: 以声明方式将state映射到视图
  • actions: 响应在view上的用户输入导致的状态变化

简单的“单向数据流”图示:


flow.png

当遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏:

  • 多个视图依赖于同一状态
  • 来自不同视图的行为需要变更同一状态
    这时,我们就需要全局单例模式管理
    如图所示:


    vuex.png

Vuex和单纯的全局对象有以下两点不同:

1.Vuex的状态存储是响应式的。当Vue组件从store(仓库)中读取状态的时候,若store中的状态发生变化,那么响应的组件也会相应的得到高效更新。
2.不能直接改变store中的状态。改变store中的状态的唯一途径就是显示地提交(commit)mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。


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

可以通过store.state来获取状态对象,以及通过store.commit方法触发状态变更:

 store.commit('increment')
 console.log(store.state.count)

由于store中的状态时响应式的,在组件中调用store中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的methods中提交mutation。

相关文章

  • Vuex状态管理模式

    Vuex是什么? Vuex是一个专为Vue.js应用程序开发的状态管理模式Vuex是全局的状态管理 Vuex用来做...

  • Vue知识总结(2)

    Vuex状态管理 Vuex是专门为Vue应用程序提供的状态管理模式,每个Vuex应用的核心是store(仓库),即...

  • vuex二次总结

    Vuex状态管理 每个Vuex应用的核心是store(仓库)Vuex是专门为Vue应用程序提供的状态管理模式,每个...

  • Vue2技术栈归纳与精粹(下篇)

    Vuex状态管理 Vuex是专门为Vue应用程序提供的状态管理模式,每个Vuex应用的核心是store(仓库),即...

  • vuex状态管理:vuex

    什么是vuex? vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组...

  • 15-Vuex基础

    Vue之vuex状态管理 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 这个Vuex包含以下几...

  • Vue学习笔记(三)

    一. 状态管理 Vuex 1. Vuex使用 Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用...

  • vuex

    Vuex介绍: Vuex官网:http://vuex.vuejs.org/ Vuex是实现数据状态管理的技...

  • vuex基础

    1.vuex是什么? 状态管理模式,集中式存储管理,多组件需要共享状态时使用vuex 1.1状态管理模式 单个组件...

  • vueX是什么?

    官方解释:Vuex时一个Vue.js应用程序开发的状态管理模式 状态管理是什么? 管理什么状态呢? vueX实例格...

网友评论

      本文标题:Vuex——状态管理

      本文链接:https://www.haomeiwen.com/subject/rnuudhtx.html