在vue项目中各组件之间传值非常的好用,但是当组件数量多的时候,就会感觉到多个组件之间传值就会变的非常痛苦。因此就需要使用vuex来管理数据值,这样在任何页面不需要传值过来的情况下就可以拿到我们想要的值,值被修改后,所有用到该值得地方都会修改。

首先创建完vue项目后安装vuex,一般创建vue项目的过程中会自动安装vuex,在此我们从头开始,默认vue项目中没有vuex。

在项目根目录打开cmd命令窗口,输入以下命令:

npm install vuex --save

安装成功之后会看到这个界面

然后输入命令启动项目:

npm run serve

成功之后看到以下结果

随便复制一个路径在浏览器打开,会看到如下页面

看到这个界面说明项目启动成功,然后我们在项目的src目录下新建一个目录store,在该目录下新建一个index.js文件,我们用来创建vuex实例,然后在该文件中引入vue和vuex,创建Vuex.Store实例保存到变量store中,最后使用export default导出store:

然后我们在main.js文件中引入该文件,在文件里面添加 import store from ‘./store’;,再在vue实例全局引入store对象;

然后我们就可以开始编写我们的vuex业务代码了,在vuex中有四个属性:State,Getters,Mutations,Actions。我们一一介绍

1.State

vuex中的数据源,一般用来保存数据,例如登录人的id,name,等等信息,首先在store/index.js文件里面写入如下代码

然后在home.vue中用

这个时候页面上就得到了我们的1

 Getters

Getter相当于vue中的computed计算属性,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算,这里我们可以通过定义vuex的Getter来获取,Getters 可以用于监听、state中的值的变化,返回计算后的结果,这里我们修改store/index.js文件如下:

接着在home.vue中添加以下代码

然后在页面中可以看到修改后的值

Mutations

数据我们在页面是获取到了,但是如果我们需要修改count值怎么办?如果需要修改store中的值唯一的方法就是提交mutation来修改,在store/index.js添加以下代码

接着在home.vue中添加两个按钮,一个加,一个减,点击加按钮执行addFun方法,点击减按钮执行subtractFun方法,然后在里面直接提交mutations中的方法修改值

点击页面的加或减会看到值改变

Actions

我们看到,当点击三次后值从2变成了-1;页面上的值是改变了;我们达到了修改store中状态值的目的,但是,官方并不建议这样直接去修改store里面的值,而是让我们去提交一个actions,在actions中提交mutation再去修改状态值,接下来我们修改store/index.js文件,先定义actions提交mutation的函数:

接着在home.vue做修改

运行项目效果一致

我们这里已经实现了一个基本的vuex修改状态值的完整流程,如果想要加减指定的数值,可以通过传参,在home.vue中修改代码如下

接着在store/index.js中接收参数

查看运行效果

vue项目配置vuex的更多相关文章

  1. 基于Typescript的Vue项目配置国际化

    基于Typescript的Vue项目配置国际化 简介 使用vue-i18n插件对基于Typescript的vue项目配置国际化,切换多种语言, 配合element-ui或者其他UI库 本文以配置中英文 ...

  2. 如何在你的Vue项目配置vux

    做移动端项目的话vue现在是首要的选择,足够轻便,文档足够全,当然用的人多,项目中遇到的坑别人可能也遇到过,解决起来也比较方便,至于在开发中做需要的移动端组件库,个人比较推崇vux. 其实项目里组件库 ...

  3. vue项目搭建和开发流程 vue项目配置ElementUI、jQuery和Bootstrap环境

    目录 一.VUE项目的搭建 1. 环境搭建 2. 项目的创建和启动 二. 开发项目 1. 配置vue项目启动功能 2. 开发vue项目 (1)项目文件的作用 (2)vue项目开发流程 (3)vue项目 ...

  4. vue项目配置及项目初识

    目录 Vue项目环境搭建 Vue项目创建 重构项目依赖 1.需要转移的文件 2.重构依赖 pycharm配置并启动vue项目 vue项目目录结构分析 vue组件(.vue文件) 全局脚本文件main. ...

  5. vue项目配置Mock.js

    扯在前面 最近一直在忙跳槽的事情,博客也好久没有更新了,上次更新还是去年,不出意外的话,从今天起继续今年的博客之旅. 今天继续完善我之前的项目架构,从零开始搭建vue移动端项目到上线,有需要的同学可以 ...

  6. vue项目配置多入口多出口【转载】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/localhost_1314/article ...

  7. vue项目配置 `webpack-obfuscator` 进行代码加密混淆

    背景 公司代码提供给第三方使用,为了不完全泄露源码,需要对给出的代码进行加密混淆,前端代码虽然无法做到完全加密混淆,但是通过使用 webpack-obfuscator 通过增加随机废代码段.字符编码转 ...

  8. vue项目配置及代理解决跨域

    axios数据请求 1.下载模块:npm install axios 2.axios特点: 1.支持在浏览器当中发起XMLHttpRequest请求 2.支持Promise 3.自动转换json数据 ...

  9. Vue 项目配置

    配置Vue的app项目首先需要配置本地环境. 1.下载node.js并且安装.(根据自己电脑参数进行选择) 打开cmd,检查是否安装成功. 分别输入: node -v npm -v 结果如图正确显示出 ...

随机推荐

  1. ssm框架中applicationContext.xml文件中配置别名

    在applicationContext.xml中配置如下: 通过以下property标签中给定name属性value属性及对应的值,来将domain包下所有实体类设置别名. 在xxxDao.xml中 ...

  2. Python3,逻辑运算符

    优先级 ()>not>and>or 1.or 在python中,逻辑运算符or,x or y, 如果x为True则返回x,如果x为False返回y值.因为如果x为True那么or运算 ...

  3. 方法解析之Method与ConstMethod介绍

    HotSpot通过Method与ConstMethod来保存方法元信息. 1.Method Method没有子类,定义在method.hpp文件中,其类继承关系如下图: Method用于表示一个Jav ...

  4. 笑了,面试官问我知不知道异步编程的Future。

    荒腔走板 大家好,我是 why,欢迎来到我连续周更优质原创文章的第 60 篇. 老规矩,先来一个简短的荒腔走板,给冰冷的技术文注入一丝色彩. 上面这图是我五年前,在学校宿舍拍的. 前几天由于有点事情, ...

  5. JQuery的turn.js实现翻书效果

    前言: hello大家好~好久没更博了……今天来和大家分享下JQ的turn.js,下面我先来简单介绍下我们今天的主角turn.js. Turn.js是一个JavaScript库,它集合了HTML5的所 ...

  6. C++/C socket编程实例

    目录 基于TCP的socket编程 服务器代码 客户端代码 运行结果 基于UDP的socket编程 服务器代码 客户端代码 运行结果 基于TCP的socket编程 服务器代码 服务器端代码如下 //T ...

  7. Apache Hudi表自动同步至阿里云数据湖分析DLA

    1. 引入 Hudi 0.6.0版本之前只支持将Hudi表同步到Hive或者兼容Hive的MetaStore中,对于云上其他使用与Hive不同SQL语法MetaStore则无法支持,为解决这个问题,近 ...

  8. C#LeetCode刷题之#83-删除排序链表中的重复元素(Remove Duplicates from Sorted List)

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3820 访问. 给定一个排序链表,删除所有重复的元素,使得每个元素 ...

  9. JavaScript 数组中根据某个属性值的中文进行排序

    普通排序 const arr = [] arr.sort((x, y) => x.prop - y.prop) 中文属性值排序 const arr = [] arr.sort((x, y) =& ...

  10. Mybatis-01-什么是Mybatis以及第一个Mybatis

    Mybatis-9.28 环境: jdk 1.8 Mysql 5.7 maven 3.6.1 IDEA 回顾: JDBC Mysql Java基础 Maven Junit SSM框架:配置文件,最好的 ...