Vuex是什么
概念：Vuex 是一个专为 Vue.js 利用程序开发的状态管理模式。它采纳集中式存储管理利用的所有组件的状态，并以相应的规定保障状态以一种可预测的形式发生变化。实用于任意组件之间通信。
PS：集中式（能够了解为学生都在课堂，老师给他们上课），还有分布式（能够了解为老师会72变，变成N集体，去学生家里给每个学生上课）
什么时候应用Vuex
如果您不打算开发大型单页利用，应用 Vuex 可能是繁琐冗余的。
那么当咱们开大大型单页面组件的时候，肯定要用Vuex吗？
- 当多个组件依赖于批准状态
- 当来自不同组件的行为须要扭转同一状态
Vuex图解
来自于官网
Vuex的store中都有啥
- state：存储公共数据的
- mutations：操作公共数据的
- actions：触发mutations的（这一步在某些时候不须要，能够间接调用mutations外面的办法）
- getters：基于state中的数据再做解决的（能够了解为store的计算属性）
Vuex中的map系列
// 这两个是当咱们这个页面应用不止一个store中的数据的时候，能够应用import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'methods: { increase() { // this.$store.dispatch('increase',this.val) // 如果没有简单的逻辑，例如调用接口，咱们能够间接接调用commit，不须要dispatch this.$store.commit('INCREASE',this.val) }, // 这样就能够间接应用了，不必像下面样的本人写办法调用，这样是间接调用的commit，不通过actions，同样有数组的写法，名称放弃对立 ...mapMutations({increase1:'INCREASE'}), // 这样就能够间接应用了，不必像下面样的本人写办法调用，调用actions，同样有数组的写法，名称放弃对立 ...mapActions({increase2:'increase'})},computed:{ // 这是对象写法 // ...mapState({sum:'sum',userId:'userId',userName:'userName'}), // ...mapGetters({bigSum:'bigSum'}) // 这是数组写法,这种写法，名字和store必须要一样 ...mapState(['sum','userId','userName']), ...mapGetters(['bigSum'])}demo
// store/index.js// 引入Vueximport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)// 创立state--用于存储数据const state = { sum: 0, userId: 12345678, userName: '景天'}// 创立mutations--用于操作数据（state）const mutations = { INCREASE(state,value) { state.sum += value }, DECREASE(state,value) { state.sum -= value }}// 创立actions--用于响应组件中的动作// 如果调用的是store.dispatch来批改store外面的值，会触发这个，再触发mutations外面的办法const actions = { // 接管两个参数 // 第一个参数能够了解为是一个小型的store,能够获取和应用store身上的货色，第二个参数是你传进来的值 increase(context,value) { // INCREASE这个大写不大写无所谓，只是有些人喜爱辨别 context.commit('INCREASE',value) }, decrease(context,value) { // INCREASE这个大写不大写无所谓，只是有些人喜爱辨别 context.commit('DECREASE',value) }}// 基于state中的数据做解决const getters = { bigSum(state) { return state.sum * 10 }}// 导出应用export default new Vuex.Store({ state, actions, mutations, getters})两个组件演示Vuex
// 组件1<template> <div class="increase"> <div>以后的和为：{{sum}}</div> <div>显示10倍值：{{bigSum}}</div> <select v-model.number="val"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <button @click="increase">+</button> <!-- 上面这一行传值进去是给mapMutations应用的，不然mapMutations获取不到你的值 --> <button @click="increase1(val)">mapMutations的+</button> <!-- 上面这一行传值进去是给mapActions应用的，不然mapActions获取不到你的值 --> <button @click="increase2(val)">mapActions的+</button> </div></template><script>// 这几个是当咱们这个页面应用不止一个store中的数据的时候，能够应用import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'export default { data() { return { val: 1 } }, methods: { increase() { // this.$store.dispatch('increase',this.val) // 如果没有简单的逻辑，例如调用接口，咱们能够间接接调用commit，不须要dispatch this.$store.commit('INCREASE',this.val) }, // 这样就能够间接应用了，不必像下面样的本人写办法调用，这样是间接调用的commit，不通过actions，同样有数组的写法，名称放弃对立 ...mapMutations({increase1:'INCREASE'}), // 这样就能够间接应用了，不必像下面样的本人写办法调用，调用actions，同样有数组的写法，名称放弃对立 ...mapActions({increase2:'increase'}) }, // computed中的这些其实能够不必，只是你写的时候要写很多，这里相当于是优化代码 computed:{ // 设定一个值接管store中的值，这样就不必写一大串了 // 这是对象写法 // ...mapState({sum:'sum',userId:'userId',userName:'userName'}), // ...mapGetters({bigSum:'bigSum'}) // 这是数组写法,这种写法，名字和store必须要一样 ...mapState(['sum','userId','userName']), ...mapGetters(['bigSum']) }};</script><style>.increase { background-color: #ccc;}</style>// 组件2<template> <div class="decrease"> <div>以后的和为：{{$store.state.sum}}</div> <div>显示10倍值：{{$store.getters.bigSum}}</div> <select v-model.number="val"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <button @click="decrease">-</button> </div></template><script>export default { data() { return { val: 1 } }, methods: { decrease() { // this.$store.dispatch('decrease',this.val) this.$store.commit('DECREASE',this.val) } }};</script><style>.decrease { background-color: #eee;}</style>简单demo
理论业务中，可能会有很多模块，那么同样会有很多的state，mutations，所以，就有了分块的写法
// store/index.js// 引入Vueximport Vue from 'vue'import Vuex from 'vuex'import user from './modules/user'import module1 from './modules/module1' // 这个外面的配置和user一样，只是业务逻辑的区别Vue.use(Vuex)// 导出应用export default new Vuex.Store({ modules: { user: user, module1: module1 }})// ./modules/userexport default { namespaced: true, // 不写不能间接应用名称 state: { sum: 0, userId: 12345678, userName: '景天' }, mutations: { INCREASE(state,value) { state.sum += value }, DECREASE(state,value) { state.sum -= value } }, actions: { increase(context,value) { context.commit('INCREASE',value) }, decrease(context,value) { context.commit('DECREASE',value) } }, getters: { bigSum(state) { return state.sum * 10 } } }同样两个组件演示
// 组件1<template> <div class="increase"> <div>以后的和为：{{sum}}</div> <div>显示10倍值：{{bigSum}}</div> <select v-model.number="val"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <button @click="increase">+</button> <!-- 上面这一行传值进去是给mapMutations应用的，不然mapMutations获取不到你的值 --> <button @click="increase1(val)">mapMutations的+</button> <!-- 上面这一行传值进去是给mapActions应用的，不然mapActions获取不到你的值 --> <button @click="increase2(val)">mapActions的+</button> </div></template><script>// 这几个是当咱们这个页面应用不止一个store中的数据的时候，能够应用import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'export default { data() { return { val: 1 } }, methods: { increase() { // this.$store.dispatch('user/increase',this.val) this.$store.commit('user/INCREASE',this.val) }, ...mapMutations('user',{increase1:'INCREASE'}), ...mapActions('user',{increase2:'increase'}) }, computed:{ ...mapState('user',{sum:'sum',userId:'userId',userName:'userName'}), ...mapGetters('user',{bigSum:'bigSum'}) // ...mapState('user',['sum','userId','userName']), // ...mapGetters('user',['bigSum']) }};</script><style>.increase { background-color: #ccc;}</style>// 组件2<template> <div class="decrease"> <div>以后的和为：{{$store.state.user.sum}}</div> <!-- modules模式下的getters，须要这么获取值 --> <div>显示10倍值：{{$store.getters['user/bigSum']}}</div> <select v-model.number="val"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <button @click="decrease">-</button> </div></template><script>export default { data() { return { val: 1 } }, methods: { decrease() { // this.$store.dispatch('user/decrease',this.val) this.$store.commit('user/DECREASE',this.val) } }};</script><style>.decrease { background-color: #eee;}</style>