Vuex使用及原理

一.Vuex是什么

Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。(vuex可以理解为一个仓库 用来存储数据，主要用在平行组件之间的数据的传递)

使用 Vuex 统一管理状态的好处：

① 能够在 vuex 中集中管理共享的数据，易于开发和后期维护
② 能够高效地实现组件之间的数据共享，提高开发效率
③ 存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步

什么样的数据适合存储到 Vuex 中：

一般情况下，只有组件之间共享的数据，才有必要存储到 vuex 中；对于组件中的私有数据，依旧存储在组件自身的 data 中即可。

模板：
main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false
new Vue({
 // 将创建的共享数据对象，挂载到 Vue 实例中
 // 所有的组件，就可以直接从 store 中获取全局的数据了
  store,
  render: h => h(App)
}).$mount('#app')

store / index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

Vuex 的核心概念

1、state 存储共享数据
2、actions 接收组件发过来的请求（中转站）
3、mutations 接受actions发过来的请求，对状态进行处理。
4、getters 修改过后的状态
5、modules 对不同的状态进行分类

二.State 数据源

State提供唯一的公共数据源，所有共享的数据都要统一放到 Store的 State I中进行存储。

// 创建store数据源，提供唯一公共数据
 const store = new Vuex.Store({
 	state: { count: 0 }
 })

2.1 组件访问 State 中数据的第一种方式：

this.$store.state.全局数据名称

2.1 组件访问 State 中数据的第二种方式：

通过刚才导入的 mapState 函数，将当前组件需要的全局数据，映射为当前组件的computed 计算属性：

// 1. 从 vuex 中按需导入 mapState 函数
import { mapState } from 'vuex'

// 2. 将全局数据，映射为当前组件的计算属性
computed: {
 	//2.1 传入数组 
	 ...mapState(['count']),
	
	//2.2 对象形式 可以自定义名称
	...mapState({
		xCount:state => state.count
	})
}

三、Mutations 变更store中的数据

Mutation 用于变更 Store中 的数据。

① 只能通过 mutation 变更 Store 数据，不可以直接操作 Store 中的数据。
② 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。

注意： mutations里不能包含异步操作。

mutations: {
  add(state) {
    // 变更状态
    state.count++
  },
  addN(state,step){
    // 变更状态
    state.count += step
  }
},

3.1 触发 mutations的第一种方式 ：this.$store.commit()

	btnHandler1() {
	// commit 的作用，就是调用 某个 mutation 函数
     this.$store.commit('add')
   },
   btnHandler2() {
     // 触发 mutations 时携带参数
     this.$store.commit('addN', 3)
   },

3.1 触发 mutations的第二种方式 ：

导入的 mapMutations 函数，将需要的 mutations 函数，映射为当前组件的 methods 方法：

// 1. 从 vuex 中按需导入 mapMutations 函数
import { mapMutations } from 'vuex'

// 2. 将指定的 mutations 函数，映射为当前组件的 methods 函数
methods: {
 ...mapMutations(['add', 'addN'])
}

四、Actions 专门处理异步操作

Action 用于处理异步任务。

如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation，但是在 Action 中还是要通过触发Mutation 的方式间接变更数据。

actions: {
    // 在Actions 中不能直接修改 state中的数据，要通过 mutations修改。
    addAsync(context) {
      setTimeout(() => {
        context.commit('add')
      }, 1000);
    },
   	addNAsync(context, step) {
		 setTimeout(() => {
		 context.commit('addN', step)
		 }, 1000)
	}
  },

4.1 触发 actions的第一种方式 ：this.$store.dispatch

// 触发 Action
 methods: {
	 handle() {
		 // 在调用 dispatch 函数，
		 // 触发 actions 时携带参数
		 this.$store.dispatch('addNAsync', 5)
	 }
 }

4.2 触发 actions的第二种方式

导入mapActions 函数，将需要的 actions 函数，映射为当前组件的 methods 方法：

// 1. 从 vuex 中按需导入 mapActions 函数
import { mapActions } from 'vuex

// 2. 将指定的 actions 函数，映射为当前组件的 methods 函数
methods: {
 ...mapActions(['addASync', 'addNASync'])
}

五、Getter：包装的作用

Getter 用于对 Store中的数据进行加工处理形成新的数据。

Getter 不会修改 Store 中的原数据，它只起到一个包装器的作用，将Store中的数据加工后输出出来。

① Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性。
② Store 中数据发生变化，Getter 的数据也会跟着变化

 getters: {
    showNum(state) {
      return '当前最新的数量是【' + state.count + '】'
    }
  },

使用 getters 的两种方式：

	this.$store.getters.名称

	import { mapGetters } from 'vuex'
	computed: {
	 ...mapGetters(['showNum'])
	}

六、Vuex实现原理

vuex能实现和像vue双向数据绑定–更新试图的功能
数据：state --> data
获取数据：getters --> computed
更改数据：mutations --> methods
actions,可以理解处理异步，而单纯多加的一层。

vuex 整体思想诞生于 flux,可其的实现方式完完全全的使用了 vue 自身的响应式设计，依赖监听、依赖收集都属于 vue 对对象 Property set get 方法的代理劫持。

最后一句话结束 vuex 工作原理，vuex 中的 store 本质就是没有 template 的隐藏着的 vue 组件

使用 Vuex 只需执行 Vue.use(Vuex)，并在 Vue 的配置中传入一个 store 对象的示例，store 是如何实现注入的？
vuex的store是如何注入到组件中的？（面试题）

	Vue.use(Vuex); // vue的插件机制,安装vuex插件
	
	Vue.mixin({
        beforeCreate() {
            if (this.$options && this.$options.store) {
                //找到根组件 main 上面挂一个$store
                this.$store = this.$options.store
                // console.log(this.$store);

            } else {
                //非根组件指向其父组件的$store
                this.$store = this.$parent && this.$parent.$store
            }
        }
    })

当use(Vuex)时候，会调用vuex中的install方法，装在vuex!

store注入 vue的实例组件的方式，是通过vue的 mixin机制，借助vue组件的生命周期 钩子 beforeCreate 完成的。即 每个vue组件实例化过程中，会在 beforeCreate 钩子前调用 vuexInit 方法。