VueX

目录

一、Vuex的核心组成

 对于我们为什么要学习Vuex？

二、Vuex版本问题及store.js的使用

1、加载以来 npm install vuex -s下载Vuex最新版本的依赖

2、导入vuex的核心4个组件，然后通过index.js加载进来

3、将vuex对应的index.js文件挂载到main.js的Vue实例中

4、测试Vuex的存储变量的功能

三、Vuex中的存值、取值获取变量值

四、Vuex中的异步同步操作

五、Vuex的后台交互

---

一、Vuex的核心组成

        对于我们为什么要学习Vuex？

Vuex很好的解决前端组件传参的问题，针对当前项目所有的变量进行统一管理，可以理解为前端的数据库

 已知的传参的方式有两种：

1、子传父 $emit     父传子 props

2、总线

相比于总线的优点在于，能够将整个项目的变量进行统一管理

图解：

下面是通过图解的方式介绍Vuex的四个组件

 官方图解：

核心组件Vuex：

    state.js 存储变量
        获取值 this.$store.state.变量值

    Getters.js 获取变量值
        获取值 this.$store.getters.变量的get方法

    mutations.js 改变变量值（同步）
        改变值 this.$store.commit（'同步方法'）

    actions.js 改变变量值（异步）
        改变值 this.$store.dispatch(‘异步的方法’)

    Vuex中默认情况下是不允许使用vue实例，想要请求后台接口，必须将vue实例当初参数从组件那一方传递过来

 

二、Vuex版本问题及store.js的使用

1、加载以来 npm install vuex -s下载Vuex最新版本的依赖

（在这里小编用npm i -S vuex@3.6.2版本的，版本不同的话效果出不来）