绝对重要的vuex

今天呢,我来和大家聊一聊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的用法还有很多这里我就不一次性列举了,后续我会慢慢更新的

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • vuex官方文档 Vuex是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存...
    yutao618阅读 3,277评论 0 3
  • 习惯养成很容易,戒掉却很难!!! 什么是Vuex? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式...
    前端又又阅读 2,824评论 0 1
  • vuex是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组...
    裘马轻狂大帅阅读 276评论 0 3
  • 一.Vuex是什么? 什么是Vuex 介绍:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。理解:...
    快乐灰灰阅读 212评论 0 0
  • 什么是Vuex 介绍:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 理解:核心就是 store...
    阿桐随记阅读 382评论 0 1