vueX

​ 如果要开发中大型应用，集中式管理数据,多个组件依赖于同一状态，来自不同组件的行为需要变更同一状态，生态环境给我们提供了官方插件vuex

一、vueX的作用

​ vue单页面应用中，每个组件内部的数据在data中存放，供vue组件内部使用，但是，vue组件之间的数据共享怎么办？即A组件要使用B组件里的数据怎么办？

​ 如果A组件和B组件是父子关系，使用，prop和事件；如果不是父子关系怎么办？使用vueX，vueX能够简化组件之间的数据共享。特别是多个组件（A，B，C，D……）共享一个数据。

​ 每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

1、vueX 能够保存全局数据，供整个应用使用

2、vueX 保存的数据是响应式的

3、vueX 保存的数据可以跟踪状态的变化

二、vuex的解释

1、vueX是个对象，该对象有个属性Store。Store是个类。

2、Store类的实例方法和属性

成员用途dispatch实例方法，通讯工具，派发actioncommit实例方法，通讯工具，提交mutationstate属性，获取公共数据

三、vueX的核心概念

1、state :

数据仓库 ，存储所有的共享数据 ，相当于vue组件里的data

2、Getter ：

在state的基础上派生的数据， 相当于vue组件里 computed

3、Mutation：

修改state的数据时，用mutation，这与 跟踪状态 有关系

4、Action：

解决mutation里只能有同步代码的问题，而action里可以有异步代码

四、数据流转

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1eRjL6U5-1593834044627)(C:\Users\31759\AppData\Roaming\Typora\typora-user-images\1592380401640.png)]

五、使用步骤

1、安装

npm i vueX --save

2、Vue对象中注册全局对象（模块）

// src/main.js import Vue from 'vue' import store from './store'; //这是vueX的代码 import App from './App' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', store,//把引入的store模块注册在vue实例中，可以使用this.$store来使用该模块对象 components: { App }, template: '<App/>' })

3、Vuex的代码

// src/tore/index.js代码： import Vue from 'vue' //引入vueX的包 import Vuex from 'vuex' //安装vueX插件包到vue上 Vue.use(Vuex) export default new Vuex.Store({ state:{ age:12 } getters:{ isAdult:state => { return state.age>=18?true:false; } }, //Getter 会暴露为 store.getters对象， //可以以属性的形式访问这些值：store.getters.isAdult; mutations: { increment (state) { // 变更状态 state.count++ } }, actions: { increment (context) { context.commit('increment') } } })