vuex的使用及五大核心

vuex是什么

vuex是一个仓库，是vue的状态管理工具 状态指的就是数据，用于存放公共数据，任何组件都可以使用vuex里的公共数据

使用场景：
当有多个组件共享数据时，如果需要构建是一个中大型单页应用，使用Vuex就可以更好地在组件外部管理状态。

vuex的五大核心

1， state ---存放Vuex store实例的状态对象，用于定义共享的数据。

例如：

state: {
    list: [],
    user:"",
  },
//等同于vue的data，用来存储变量的。

state的辅助函数—mapState 辅助函数

//使用方法
 1. 引入import { mapState } from 'vuex'
 2. 在要使用的组件的计算属性中使用
 computed: {
	 mapState({count: 'count',}) //第一种写法
	...mapState(["count"]) 		//第二种写法
	}

2，Mutations ---用于修改state中定义的状态变量。

想要修改state的变量数据时必须在mutation中进行修改，里面是封装的函数 等同于vue的methods。

 mutations: {
    add(state,name){
      state.user=name
 	},
 	//每一个函数只能有两个参数，第一个是state，是上面state里面的数据
 	//第二个是有组件传过来的数据，在函数中对state的数据进行修改
}

mutations的辅助函数 —mapMutations
在需要的组件中的methods中使用

import { mapMutations } from "vuex";
methods: {
    ...mapMutations({}),
    ...mapMutations([
      'increment' // 映射 this.increment() 为 this.$store.commit('increment')
    ]),

  },

3，getter ---外部程序通过它获取变量的具体值，或者在取值前做一些计算（是store的计算属性）。

等同于vue的computed属性，

computed: {
  sum (state) {
  	let num=0;
    state.arr.foreach(item=>{
		num+= item.num*item.price
	})
	return num
  }
}

getter的辅助函数 — mapGetters，在需要的组件的computed中使用

import { mapGetters } from "vuex";
computed: {
    ...mapGetters({
      "": "vuex仓库定义的方法",
    }),
}

4，Action ---向store发出调用通知，执行异步操作

Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作 Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

action的辅助函数 —mapActions，
使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用

import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions({
      add: 'incrementN' //映射 this.add() 为 this.$store.dispatch('incrementN')
    })
  }
}

5，module ---是对state进行分类处理

使用单一状态树，导致应用的所有状态集中到一个很大的对象。但是，当应用变得很大时，store 对象会变得臃肿不堪。

意思就是当有很多变量，或者有很多方法时，就需要模块化，将方法数据进行拆分后引入

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})