五分钟搞懂Vuex实用知识(小结)

2020-06-13 10:40:16易采站长站整理

这段时间一直在用vue写项目,vuex在项目中也会依葫芦画瓢使用,但是总有一种朦朦胧胧的感觉。于是决定彻底搞懂它。

看了一下午的官方文档,以及资料,才发现vuex so easy!

作为一个圈子中的人,决定输出一下文档,如果你仔细看完这篇文章,保证你对vuex熟练掌握。

我把自己的代码上传到了github,大家有需要的可以拉下来:github

先说一下vuex到底是什么?

vuex 是一个专门为vue.js应用程序开发的状态管理模式。

这个状态我们可以理解为在data中的属性,需要共享给其他组件使用的部分。

也就是说,是我们需要共享的data,使用vuex进行统一集中式的管理。

vuex中,有默认的五种基本的对象:

state:存储状态(变量)
getters:对数据获取之前的再次编译,可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()
mutations:修改状态,并且是同步的。在组件中使用$store.commit(”,params)。这个和我们组件中的自定义事件类似。
actions:异步操作。在组件中使用是$store.dispath(”)
modules:store的子模块,为了开发大型项目,方便状态管理而使用的。这里我们就不解释了,用起来和上面的一样。

下面我们正式开始,一步步使用vuex

1、首先创建一个vue-cli项目

执行下面的命令,创建一个app项目(这里也可以使用其他非webpack模板,以及非app名称)


vue init webpack app

2、创建完成之后,我们进入文件夹下,并且运行项目


cd app/
npm run dev

接下来我们在src目录下创建一个vuex文件夹

并在vuex文件夹下创建一个store.js文件

文件夹目录长得是这个样子

3、目前我们还没有引入vuex,我们需要先下载vuex,并且引入它

在保证我们处于我们项目下,在命令行输入下面命令,安装vuex


npm install vuex --save

4、安装成功之后,我们就可以在store.js中尽情玩耍我们的vuex了!

在store.js文件中,引入vuex并且使用vuex,这里注意我的变量名是大写Vue和Vuex


import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
count: 0
}
export default new Vuex.Store({
state
})

接下来,在main.js中引入store