vueX

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	实例方法，通讯工具，派发action
commit	实例方法，通讯工具，提交mutation
state	属性，获取公共数据

三、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')
   		 }
    }
})