Vuex

一、什么是Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

二、为什么使用Vuex

如果一个项目频繁使用组件之间的关系，来修改data中的值。一旦项目规模庞大起来，那么管理这些数据会非常棘手。

为此Vue官网为这些频繁需要修改并且监测其变化的数值，提供了一个管理工具就是 Vuex

三、如何使用Vuex

核心概念

每一个vuex都是一个store对象，每个对象都有以下5个核心概念

state:定义共享数据源
mutations:唯一可以同步修改共享数据源的数据操作员
actions:可以异步操作，但是不能直接修改state数据源，需要commit到mutations
getters: vuex的计算属性，当数据需要依赖state中的一个数据或者多个数据计算得来的话，可以定义到这里
modules: 分模块，让代码更加清晰，便于维护

使用方式

两种使用方式

state

直接使用

this.$store.state.state中的数据名

映射使用

import { mapState } from 'vuex'
export default {
  computed: {
    // 在 template 中配合 指令、插值表达式使用
   ...mapState(['state中的属性名'])
   }
 }

mutations

直接使用

this.$store.commit('mutaitions的函数名',函数需要的参数)

映射使用

import { mapMutations } from 'vuex'
export default {
    methods: {
        ...mapMutations(['mutations中的函数名'])
        // 自定义需要的方法，使用mutations来修改state中的数据
        addFn(){
    		// this.mutations中的函数名
		}
    }
}

actions

直接使用

this.$store.dispatch('actions中的函数名',该函数需要的参数)

映射使用

import { mapActions } from 'vuex'
export default {
    methods: {
        ...mapActions(['actions函数名'])
        asyncSubFn(){
    		// this.actions函数名
		}
    }
}

getters

直接使用

this.$store.getters.getters的名字

映射使用

import { mapGetters } from 'vuex'
export default {
    computed: {
        // 在 template 中配合 指令、插值表达式使用
        ...mapGetters(['getters的名字'])
    }
}

modules

分模块

const store = new Vuex.Store({
    modules: {
        state(){},
        mutations:{},
        actions:{},
        getters:{},
        // ...可以继续在这里分模块
    }
})