今天呢,我来和大家聊一聊vue的状态管理模式---vuex
vuex是专门为vue而开发的一个状态管理模式,它就相当于一个可以集中管理组件以及将要传输的信息的中转站,它可以通过一些相应的规则来使状态以可预期的情况发展,不管你想要管理的组件是否要通过路由交互,在vuex里声明的变量及方法都是可以直接使用的。
如果想要使用vuex,我们首先要安装它,具体怎么操作呢,且看我一一道来:
我们先创建一个名为store的文件夹
记得创建到你的项目里
然后在里面创建一个index.js(这可不是路由里的那个index.js)
里面要填写的值马上告诉你
然后我们需要在终端运行一段代码:
这是用nom来下载时需要运行的代码,我本人则是用的cnpm仅仅只需在前面加一个c
或者
用yarn则是这串(虽然我没用过)
在安装好vuex之后我们就要对index.js来进行操作了
首先引入Vue
第二步
然后引入vuex
第三步
紧随其后的就是使用它
再然后就是vuex的核心内容了,它主要有六项,分别是:
state // 数据的声明
mutations // 修改数据的方法
getters // 可以用来计算state的属性 根据数据的变化来计算新的值
actions // 类似于mutations 但actions可以进行异步操作
plugins // plugins是用来放安装的插件的,它是用[ ]来承接的
modules // modules可以连接其他的组件
这六项都是需要放在export default new Vuex.Store({})里的
整体的结构
进行到这里我们的准备工作也算是完成了,接下来就是vuex的使用了
这里我们创建两个vue页面
我们通过路由来将两个页面连接起来
再然后,我们在vuex里传一个变量n,并给它赋个值
另一个vue也用这个p
这样在最后的页面就会出现两个一样的从vuex中获取的值
vuex的用法还有很多这里我就不一次性列举了,后续我会慢慢更新的