vue的集中式存储状态管理模式vuex

什么是vue（来源于vue官网）

• vue说明

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
    它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
    Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导
    入导出等高级调试功能。
  

• vuex一般包含以下部分（重要）

  state,      //状态，驱动应用的数据源，数据状态
  mutations,  //用于更新状态，包含多个更新状态的函数
  view,       //以声明方式将 state 映射到视图；
  actions,    //提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。响应在 view 上的用户输入导致的状态变化。
  getters,    //Stour的计算属性
  

• $store对象

    * 当我们引入store时，那么main.js管理的所有组件，包括间接子组件，都将拥有一个$store对象，用于使用vuex ，它提供了两个主要属性，和一个重要方法
    * 1、state：对应store.js文件中注册state对象，可以通过此属性使用state中的数据
    * 2、getters：对应getters，可以使用里面的函数
    * 方法：dispatch(actionName,data) :分发调用action
  

1、搭建环境

• 1、安装vue-cli脚手架https://blog.csdn.net/grd_java/article/details/105445017
• 2、安装vuex：
• 3、编写实例文件

2、将上面实例变为一个vuex实例，第一步，配置核心管理模块

• src文件夹下新建一个js文件，用作核心管理模块，一般起名store.js
• 2、编写store.js文件
• 3、main.js引入vuex核心管理模块，==当我们引入store时，那么main.js管理的所有组件，包括间接子组件，都将拥有一个$store对象，用于使用vuex ==

3、组件使用核心管理模块

• $store对象
  • 当我们引入store时，那么main.js管理的所有组件，包括间接子组件，都将拥有一个$store对象，用于使用vuex ，它提供了两个主要属性，和一个重要方法
  • 1、state：对应store.js文件中注册state对象，可以通过此属性使用state中的数据
  • 2、getters：对应getters，可以使用里面的函数
  • 方法：dispatch(actionName,data) :分发调用action

获取state数据

使用getters实现监听

• 1、定义store.js的监听
• 2、在组件中的监听属性computed中使用getters监听

使用dispatch分发调用mutations中的方法

• 1、使用dispatch调用action监听
• 2、编写action监听，并获取调用mutations对象
• action监听语法
• 
• 3、编写mutations方法
• 扩展，一般条件，和异步直接写在action中

4、使用vuex封装好的数组对象操作vuex，不用每个都使用this.$store

• 1、在需要的组件中引入import {mapState,mapGetters,mapActions} from ‘vuex’
  • mapState：数组，对应的是State中的数据
  • mapGetters：数组，对应的是getters中的监听函数
  • mapActions: 数组，对应的是action中的action函数
• 2、直接遍历取值即可（这里用到了ES6提供的…运算符，可以快速遍历数组）