@Author：Runsen
@Date：2020/7/12

人生最重要的不是所站的位置，而是内心所朝的方向。只要我在每篇博文中写得自己体会，修炼身心；在每天的不断重复学习中，耐住寂寞，练就真功，不畏艰难，奋勇前行，不忘初心，砥砺前行，人生定会有所收获，不留遗憾（作者：Runsen ）

作者介绍：Runsen目前大三下学期，专业化学工程与工艺，大学沉迷日语，Python， Java和一系列数据分析软件。导致翘课严重，专业排名中下。.在大学60%的时间，都在CSDN。决定今天比昨天要更加努力。我的征途是星辰大海！

今天，我们开始了Vuex的学习。Vuex用白话来说，就是帮我们存储一下多个组件共享的数据，方便我们对其读取和更改。

文章目录

Vuex的简介
Vuex的安装
引入 Vuex挂载到vue对象
兄弟组件
路由编写

Vuex的简介

Vuex 是专门为 Vue.js 设计的状态管理库，它集中存储，管理所有组件的状态；通过前面的学习，我们知道父组件要把值传递给子组件的时候，可以通过 props 来传递，子组件要把值传递给父组件的时候，可以通过事件的形式来实现，而对于兄弟组件来说，就需要用到 Vuex 来实现了。也就是一个组件把值放入到 Vuex 中，另一个组件从中取值从而实现参数传递的效果。

Vuex的五大特性：状态state、计算属性getter、同步行为mutation、异步行为action、模块module

state：用于存储数据，类似vue实例的data属性。
mutations：用于递交更改，对state对象中的属性数据进行更改。
actions：用于进行递交异步更改，通过调用mutations实现对数据的更改。
getters：可以认为是store的计算属性;与计算属性一样,getter的返回值会根据它的依赖缓存起来,且只有当它的依赖值发生变化才会被重新计算
mapGetters：辅助函数，将 store 中的 getter 映射到局部计算属性：
module：将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

Vuex的安装

下面我们创建Vue项目

创建的目录如下所示。

下面要执行npm install vuex --save 命令安装 Vuex，要注意的是这里一定要加上 –save，因为你这个包我们在生产环境中是要使用的。

引入 Vuex挂载到vue对象

先通过官方提供的一个计数器的示例来引入 Vuex 的使用，具体实现步骤如下，在 src 文件夹下新建 store 文件夹，意思为数据仓库，里面存放了整个项目需要的共享数据，在 store 下新建 index.js

index.js代码如下。

import Vue from 'vue'
import Vuex from 'vuex'
//使用vuex
Vue.use(Vuex)
//导出store
export default new Vuex.Store({state: {count: 0},//组件通过dispatch方法触发actions里面的countAdd方法，然后actions提交mutations里面的countAdd方法。actions: {//接收组件传过来的参数num，Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象countAdd(context,num){context.commit('countAdd',num)}},mutations: {//传入一个state对象，接收传过来的参数numcountAdd(state,num){state.count+=num}}
})

这里顺便主要介绍下store文件夹中的四个js文件。

index.js //存储状态 并建立依赖关系
actions.js //触发mutations中的方法 请求数据写在这里
getters.js //状态获取逻辑
mutations.js //操作逻辑

创建Vuex的实例 new Vuex.store()，然后再main.js将vuex实例挂载到vue对象。接下来，在main.js中引入store，这里我导入了router，router在下篇文章中介绍。

下面就是main.js代码

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import store from './store/index' // 引入store
import router from './router'import App from './App'Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({el: '#app',store,router,components: { App },template: '<App/>'
})

执行npm run dev跑起来

兄弟组件

Vuex的作用就是在兄弟组件共享数据。

下面新建组件Child1.vue，代码如下。

<template><div class="child-1"><p>Child1:{{count}}</p><button @click="handleClick(1)">Child1-Add</button></div>
</template><script>
export default {name: 'Child1',data () {return {//我们不再将数据放到组件里//count: 0}},//通过计算属性来获得countcomputed: {count: function(){//通过vue的this.$store来获得statereturn this.$store.state.count}},methods: {handleClick:function(num){//通过dispatch触发actions中的方法countAdd，actions提交mutations，num是携带的参数this.$store.dispatch('countAdd',num)}}
}
</script>
<style scoped>
</style>

下面新建组件Child2.vue，代码如下。

<template><div class="child-2"><p>Child2:{{count}}</p><button @click="handleClick(10)">Child2-Add</button></div>
</template><script>
export default {name: 'Child2',data () {return {//count: 0}},//通过计算属性来获得countcomputed: {count: function(){//通过vue的this.$store来获得statereturn this.$store.state.count}},methods: {handleClick:function(num){//通过dispatch触发actions中的方法countAdd，actions提交mutations，num是携带的参数this.$store.dispatch('countAdd',num)}}
}
</script>
<style scoped></style>

最后，新建组件Parent.vue，然后在路由中引过去，指定上面的两个components。

<template><div class="parent"><child-1></child-1><child-2></child-2></div>
</template><script>
import Child1 from './Child1'
import Child2 from './Child2'
export default {name: 'Parent',data () {return {}},components: {Child1,Child2}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

路由编写

关于router直接是没有介绍的，其实我在创建项目的时候选择了router路由。路由就是指定路径和组件的，index代码如下。

import Vue from 'vue'
import Router from 'vue-router'
import Parent from '@/components/Parent'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'Parent',component: Parent}]
})

下面就是最终的目录模块。

最终效果就是点击第一个按钮加一，第二个加10的效果。

相信写到这里，我i应该对vuex有了更加清楚的理解了。

四十二、开始Vuex的学习：如何在Vue中使用Vuex相关推荐

深度学习（四十二）——深度强化学习（5）PPO, IMPALA, Hierarchical RL, OpenAI
PPO(Proximal Policy Optimization) PPO是2017年由OpenAI提出的一种基于随机策略的DRL算法,也是当前OpenAI的默认算法. PPO是一种Actor-Cri ...
OpenCV学习笔记（四十一）——再看基础数据结构core OpenCV学习笔记（四十二）——Mat数据操作之普通青年、文艺青年、暴力青年 OpenCV学习笔记（四十三）——存取像素值操作汇总co
OpenCV学习笔记(四十一)--再看基础数据结构core 记得我在OpenCV学习笔记(四)--新版本的数据结构core里面讲过新版本的数据结构了,可是我再看这部分的时候,我发现我当时实在是看得太马 ...
JavaScript学习（四十二）—利用工厂模式创建对象以及工厂模式创建对象的不足
JavaScript学习(四十二)-利用工厂模式创建对象以及工厂模式创建对象的不足一.利用工厂模式创建对象工厂模式是JavaScript中的一种设计模式,它的作用是批量创建具有同种属性的对象. 格 ...
Slicer学习笔记（四十二）slicer c++源码编译
Slicer学习笔记(四十二)slicer c++源码编译 1.cmake生成项目 2.编译失败的原因汇总 2.1.下载代码失败之前在windows下编译slicer,没有做笔记. 后面再次编译还会 ...
maya批量命名插件_教你玩转MAYA的四十二精华造诣（第一期）
最近在整理文档时发现我收藏了一篇关于MAYA应用技巧的文章,突然有兴趣看了看,结果发现老版本MAYA中的某些内容很多已经无法应用于新版本.我又上网查了一下,结果发现网上好多帖子和我收藏的这篇内容基本一 ...
四十二、深入Java中的文件读取操作
@Author:Runsen @Date:2020/6/8 作者介绍:Runsen目前大三下学期,专业化学工程与工艺,大学沉迷日语,Python, Java和一系列数据分析软件.导致翘课严重,专业排名 ...
深度学习入门笔记（十二）：深度学习数据读取
欢迎关注WX公众号:[程序员管小亮] 专栏--深度学习入门笔记声明 1)该文章整理自网上的大牛和机器学习专家无私奉献的资料,具体引用的资料请看参考文献. 2)本文仅供学术交流,非商用.所以每一部分具 ...
大数据的过去、现在和未来：万字长文解读《大数据四十二条》
这是傅一平的第314篇原创 "与数据同行"开通了微信群,现已汇聚了3500位小伙伴了,长按以下二维码发送"入群"后加入. 正文开始它山之石可以攻玉,何宝宏博士 ...
左耳听风第四十二周
左耳听风第四十二周每周完成一个ARTS: 每周至少做一个 leetcode 的算法题.阅读并点评至少一篇英文技术文章.学习至少一个技术技巧.分享一篇有观点和思考的技术文章.(也就是 Algorit ...

四十二、开始Vuex的学习：如何在Vue中使用Vuex