Vuex简单总结

113 阅读2分钟

前端小白简单总结,还望各位大佬多多指教~

之前刚开始看Vuex时候,有点晕,又仔细研究了一下,明白了,以下是个人的简单总结,仅供参考

Vuex是什么

Vuex 是一种状态管理模式,把应用中所有组件的状态都集中存储在store里,统一管理。 单向数据流:数据变化导致页面发生变化 在这里插入图片描述

Vuex的流程图

在这里插入图片描述

整个流程大致如下:

用户和vue组件发生交互触发了actions,actions传递state并提交(调用)mutations,mutations对state进行一系列逻辑处理得到新的state,因为state变化导致Vue组件页面重新渲染。

核心概念:

  • state:应用的初始状态数据,是一个对象树,存储着应用中所有的状态对象
  • getters:store的计算属性,获取数据
  • actions: 提交或者说调用(commit)mutations的方法,store只有通过提交mutations才能发生变化
  • mutations: 一系列处理逻辑
下面从事件角度大致描述一下整个过程:

首先Vue组件被点击,触发绑定的事件,通过methods方法中的mapActions方法,将actions映射到store的actions中,actions传递state给mutations,将调用提交或者说调用(commit)mutations的方法,mutations里是具体的方法,对state进行具体的操作;

下面再从数据驱动视图变化的角度来描述一下整个过程:

首先store中的state数据,通过getters获取到state中的数据,利用computed计算属性中的mapGetters方法,将数据映射到store的getters里,这样页面就拿到了数据,可以将数据展现在页面中了。

vuex 平级组件交互,找共同的父级解决,跨组件交互,eventBus混乱(发布订阅) vuex主要借鉴了(flux redux),vuex只能在vue中使用(单独为vue开发的) vuex为了大型项目,主要是(状态)管理,将数据统一管理

一、安装vuex

npm install vuex --save

二、引入vuex

main.js中引入vuex

import Vue from 'vue'
import Vuex from 'vuex'
Vue.useVuex