vuex - 基础篇

在vue的使用过程中，当单页应用越来越大的时候，项目可能会出现要使用一些公共的数据，vue也设计了vuex供开发者在开发vue单页应用时对应用公共数据进行一个更好的管理。

当然，在vue的项目中，使用vuex不一定是必要的，看项目需要。

what

vuex是一个vue的数据仓库，因为vue是组件化开发，数据在组件内是局部的，如果需要做数据共享，比如登录的用户信息，其实所有的地方都可能会用到，这个时候抽离出来是很有必要的。

数据流动

vuex是一个统一的数据管理，数据是通过vuex定义的规则来进行流动的。

vuex中数据只能通过mutation来提交，mutation只能进行同步操作，action进行异步操作。

核心

vuex提出了这几个核心的概念

state
getter
mutation
action

state

state就是数据源，存储着我们定义的公共数据

在state中，存储着我们要的公共数据，在vue组件中，我们可以通过computed来获取state数据，当state改变时，computed也会随之更新。

// 定义
state: {userName: 'binnie'
}// 使用
computed: {userName() {return this.$store.state.userName}
}
复制代码

getter

getter，顾名思义，其实就是获取数据，当然，如果要原封不动的state数据，直接获取就好了。如果要获取的数据是对state数据进行操作后返回，我们可以在computed里面操作，也可以看getter里面处理，看需求情况。getter属于统一处理。

// 定义
getters: {userNamelen: state => {return state.userName.length}
}// 使用
computed: {userNamelen() {return this.$store.getters.userNamelen}
}
复制代码

mutation

vuex中，只有mutation可以修改state的数据，并且mutation的修改只能是同步的。

// 定义
mutations: {userName(state, payload) {state.userName = payload.userName}
}// 提交修改
store.commit('userName', { userName: 'change'})
复制代码

action

mutation只能进行同步操作，异步操作的话就要放到action中处理。

// 定义
actions: {userName(context) {fetch().then((name) => {context.commit('userName', { userName: name})})}
}// 提交修改
store.dispath('userName', {})
复制代码

写在最后

vuex作为vue的数据管理仓库，方便了我们对公共数据的管理。

当然，关于是否需要使用是看项目需要。当项目中的数据需要抽出公共数据的情况下使用是合适的；当项目较小或者数据基本不交叉，那就没有比较使用vuex了。

vuex - 基础篇相关推荐

手摸手，带你用vue撸后台系列一（基础篇） - 掘金
完整项目地址:vue-element-admin 系列文章: 手摸手,带你用 vue 撸后台系列一(基础篇) 手摸手,带你用 vue 撸后台系列二(登录权限篇) 手摸手,带你用 vue 撸后台系 ...
Python Qt GUI设计：信号与槽的使用方法（基础篇—7）
目录 1.信号与槽的概念 2.信号与槽的基础函数 2.1.创建信号函数 2.2.连接信号函数 2.3.断开信号函数 2.4.发射信号函数 3.信号和槽的使用方法 3.1.内置信号与槽的使用 3.2.自 ...
Python Qt GUI设计：窗口布局管理方法【强化】（基础篇—6）
目录 1. 水平布局类(QHBoxLayout) 2.垂直布局类(QVBoxLayout) 3.网格布局类(QGridLayout) 3.1.单一的网络布局 3.2.跨越行.列的网络布局 4.表单布局 ...
Python Qt GUI设计：窗口布局管理方法【基础】（基础篇—5）
目录 1.布局管理器进行布局 2.容器控件进行布局 3.geometry属性:控件绝对布局 4.sizePolicy属性:微调优化控件布局 Qt Designer提供4种窗口布局方式,分别如下: Ve ...
ES6 你可能不知道的事 – 基础篇
ES6 你可能不知道的事 – 基础篇转载作者:淘宝前端团队(FED)- 化辰链接:taobaofed.org/blog/2016/07/22/es6-basics/ 序 ES6,或许应该叫 ES ...
python多线程并发_Python进阶记录之基础篇（二十四）
回顾在Python进阶记录之基础篇(二十三)中,我们介绍了进程的基本概念以及Python中多进程的基本使用方法.其中,需要重点掌握多进程的创建方法.进程池和进程间的通信.今天我们讲一下Python中 ...
基础篇9-python基本数据结构-列表
基础篇9-python基本数据结构-列表一.列表: 1.有序的集合 2.通过偏移来索引,从而读取数据 3.支持内嵌 a =[[1,2,3],[4,5,6]] 4.可变类型 a[0][1] = 7 二 ...
Linq初级班 Linq To XML体验(基础篇)
LINQ To XML体验(基础) 这两天开始学习LINQ to XML的知识,我会继续把自己的感想和示例发布给初学者们学习的,一样欢迎高手们多多指点,请勿使用过激语言,针锋相对,我是个初学者,自知还 ...
php 爬虫_Scrapy 爬虫完整案例-基础篇
1 Scrapy 爬虫完整案例-基础篇 1.1 Scrapy 爬虫案例一 Scrapy 爬虫案例:爬取腾讯网招聘信息案例步骤: 第一步:创建项目. 在 dos下切换到目录 D:爬虫_scriptsc ...