Vuex入门
参考文档(官方文档):https://vuex.vuejs.org/zh/。本人就是跟着此文档学习的理论基础,当中有很多代码小例子。
根据以上po出链接,认真把这个资料看完,Vuex就能大致了解并且写出一个小demo了。
接下来本人把学习过程大致记录一下,多多复习。
什么是Vuex
就是专门管理vue.js应用的状态管理模式。
首先记住这个图:
(网上大部分都是这张图,因为是官方文档中的)
图中重点为state、actions、mutations,被Vuex这个绿色的虚线框住的这一块。
Vuex是专门为Vue.js设计的状态管理库,以利用Vue.js的细粒度数据响应机制来进行高效的状态更新,接下来进行这些概念的重点讲解。。
Vuex中的核心概念
热心网友提供的资料:Vuex——核心概念和API:https://www.cnblogs.com/humiao-0626/p/11739333.html
1. state[唯一数据源(SSOT)]
基本数据,vuex状态管理的对象,它应该是唯一的。
2. getter
对数据获取之前的再次编译,可以理解为state的计算属性。
从基本数据派生的数据,借助vue的计算属性competed来实现缓存。
3. mutation
提交更改state的方法,是同步的。
4. action
像一个装饰器一样包裹mutation,使之可以异步,触发mutation方法
5. modules
模块化Vuex,当应用变得非常复杂时,store对象会变得臃肿
什么情况下使用Vuex?
vuex可以管理共享状态,附带了更多概念和框架。
创建一个中大型单页应用可以考虑使用Vuex进行状态管理。
使用Vue的步骤
第一步:安装Vuex
- NPM:
npm install vuex --save
使用之前必须进行安装vuex这一步骤。(加上- -save)
本人使用的是NPM安装。
第二步:引入Vuex
- 在js中引用vuex(后面介绍引用的js具体是哪个)
//注册vuex import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex);//使用vuex
第三步:了解Vuex的核心:store(仓库)
- 在src目录下创建一个store目录。
store目录下创建一个index.js
- 创建一个仓库
const store = new Vuex.Store({
state,
...
actions,
modules: {
...
}
});
第四步:注册到Vue实例中
new Vue({
el: '#app',
store,
...
components: { App },
template: '<App/>'
})
具体的可以看这篇博文,一篇很不错的博文,热心网友提供的Vuex详解:https://segmentfault.com/a/1190000015782272。
本人需要去修改开题报告了,保存一下搬运来的文章,热心网友还是很厉害的。