Vue基础-Vuex

概念
专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

Github地址：https://github.com/vuejs/vuex

什么时候使用？
1、多个组件依赖于同一状态；
2、来自不同组件的行为需要变更同一状态。

工作原理

安装
默认安装是vue3的vuex4.1.0版本，vue2需要安装vuex3版本

yarn add vuex

如果安装错了需要卸载重新安装

npm uninstall vuex

vue2安装3.2.0版本

yarn add vuex@3.2.0

引入Vuex并创建store

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)//用于响应组件中的动作
const actions = {
    jia(context, value) {
        context.commit('JIA', value)
    }
}
//用于操作数据（state）
const mutations = {
    JIA(state, value) {
        state.sum += value
    }
}
//用于存储数据
const state = {
    sum: 0
}
//创建store并暴露
export default new Vuex.Store({
    actions,
    mutations,
    state
})

使用store

import store from './store'
new Vue({
  render: h => h(App),
  store,
  beforeCreate() {
    Vue.prototype.$bus = this
  }
}).$mount('#app')

调用：

this.$store.dispatch('jia',3)

1、如果业务逻辑复杂，可以actions里可以分多个方法处理，context.dispatch('next',value)
2、如果业务简单，不需要actions处理，外部也可以直接调用commit,this.$store.commit('JIA',3)

getters配置项
当state中的数据需要经过加工后再使用时，可以使用getters加工。

const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}

<h1>当前和：{{ $store.getters.bigSum }}</h1>

简化代码
一、mapState和mapGetters
1、引入：

import { mapState } from 'vuex';
import { mapGetters } from 'vuex';

2、使用

computed:{
    ...mapState({sum:'sum'}),
    ...mapGetters({bigSum:'bigSum'})
}

<h1>当前和：{{ sum }}</h1>
<h1>当前和：{{ bigSum }}</h1>

简写方式：

...mapState(['sum']),
...mapGetters(['bigSum'])

二、mapActions和mapMutations
引入：

import { mapActions } from 'vuex';
import { mapMutations } from 'vuex';

方式一：

 <button @click="add(3)">加</button>

...mapActions({add:'jia'})
 ...mapMutations({ add: 'JIA' })

方式二：

<button @click="add">加</button>

add() {
   this.increment(3)
},
...mapActions({increment:'jia'}),
...mapMutations({ increment: 'JIA' })

另外可以实现多组件共享属性（state、getters里）和方法（actions 、mutations里）

vuex模块化
利用对象对actions、mutations、state、getters进行分组，实现模块化管理

const countAbout = {
    namespaced:true,
    actions: {
        jia(context, value) {
            context.commit('JIA', value)
        }
    },
    //用于操作数据（state）
    mutations: {
        JIA(state, value) {
            state.sum += value
        }
    },
    //用于存储数据
    state: {
        sum: 0
    },
    getters: {
        bigSum(state) {
            return state.sum * 10
        }
    }
}
const personAbout = {
    namespaced:true,
    actions:{

    },
    mutations:{

    },
    state: {

    },
    getters: {

    }
}

//创建store并暴露
export default new Vuex.Store({
   modules:{
    countAbout,
    personAbout
   }
})

调用也修改为通过模块进行访问：

...mapActions('countAbout',{increment:'jia'})
...mapMutations('countAbout',{ increment: 'JIA' })

this.$store.dispatch('countAbout/jia',3)
this.$store.commit('countAbout/JIA',3)

this.$store.state.countAbout.sum;
this.$store.getters['countAbout/bigSum'];

...mapState('countAbout',['sum']),
...mapGetters('countAbout',['bigSum'])