VUEX的总结--是什么--来干嘛的 --五大核心 -- 辅助函数 -- 安装

vuex是什么

简单一点理解：全局状态管理工具

复杂一点理解：

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

vuex来干什么

1. 主要解决大中型复杂项目的数据共享问题

要注意的是：

  小型的  数据特别少的  使用兄弟组件传值   （eventBus）
  
  当组件通信特别繁琐，让人头疼的时候在去用  （vuex）

2. 也可以理解为是 一个大型的仓库来存放东西的

目前我所应用到的

  vuex存储用户登录时的相关信息
  
  购物车对数据存储时的使用
  
  单⻚应⽤中，组件之间的状态
  
  ⾳乐播放
  

vuex的五大核心使用方法

state
作用： 保存初始化的一些状态(数据)

  // 数据源载体
  state: {
    list:[]
  },

在组件中： this.$store.state.list

mutations

 // 唯一可以提交可以改变state的状态，也就是数据的属性值
  mutations: {
    appList(state,res){
    state.list=res
    }
  },

在组件中： this.$store.commit（‘ appList ’，res）

getters

  // 计算属性  用于改变state的值，派生出多个数据源
  getters: {
    sum(state) {
      let sum = 0;
      state.list.forEach((item) => {
        return sum++
      })
      return sum
    }
  },

在组件中： this.$store.getter.sum

actions

// 提交的是mutation,用commit提交 而不是直接变更状态，可以包含任意异步出操作
  actions: {

    ajaxList(context) {
      axios.get('static/data.json').then((res) => {
        // console.log(res.data)
        context.commit('appList', res.data)
      })
    }
  },

在组件中：this.$store.dispath（ ‘ajaxList ’ ）

modules

作用： 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。
当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）
每个模块拥有自己的 state、mutation、action、getter 等

 // 拆分成多个模块 
 
  modules: [],
  //这个我所应用到的不多，就不详细介绍了

小总结：

 1.调用state数据：     this.$store.state.cat.cat
 2.调用mutations方法： this.$store.commit("名字")
 3.调用getters方法：   this.$store.getters.cat.sum
 4.调用actions方法：   this.$store.dispatch("名字")

vuex的辅助函数

当然了，vuex也有自己的辅助函数，给我们在敲代码中提供了便利，不用一个个this.$store…

state辅助函数为mapState，
actions辅助函数为mapActions，
mutations辅助函数为mapMutations。

 import { mapState, mapMutations, mapGetters, mapActions } from "vuex";
 //引入在 组件 里面 
// mapState  mapGetters  放在 computed  里面
// mapMutations  mapActions  放在  methods 里面
//   ajaxFN 在 mounted 里面 写  this.ajaxFn()
//（Vuex实例身上有mapState、mapActions、mapMutations属性，属性值都是函数）

使用辅助函数：
        1.state:   ...mapState("cat",["cat"])              第一个参数就是命名空间的名字，第二个参数就是状态
        2.mutations  ...mapMutations("cat",["changeCat"])  第一个参数就是命名空间的名字，第二个参数就是同步方法
        3.getters： ...mapGetters("cat",["cat"])
        4.actions:  ...mapActions("cat",["ajaxCat"])    

（具体怎样使用就到网上去查找吧，嘻嘻）

vuex的安装

vue2.0 手动配置
1.cnpm install vuex -S

2.在 src 中 配置一个 store
在 store 中新建一个 index.js
在 index.js 中配置如下：

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {},
  mutations: { },
  getters: { },
  actions: { },
  modules: [],
  plugins: [createPersistedState()],
})

（对了， vuex-persistedstate 是为了让数据持久化
目的：能够固化到本地，减少无用的接口访问，以及更佳的用户体验。
下载方式：cnpm install vuex-persistedstate -S）
3.在main.js中配置：

  //引入store
   import store from './store'
     /* eslint-disable no-new */
     new Vue({
 		 el: '#app',
	  	router,
 	 	// 使用 store
 		 store,
 		 components: {
   		 App
 			 },
  		template: '<App/>'
	})

4.到目前为止，貌似是配置完成了，不过，还是要测试一下的

在state中

state: {
    list: [],
    count:100,
  },

在组件的created周期中

created(){
console.log(this.$store.state.count)
},

在控制台上 出现 100 就成功了

Ending。。。