[JavaScript知识库]VueX-

什么是VueX

vueX是一个状态管理工具，用来管理vue数据，可以实现组件之间数据共享；
它提供了一个公共内存，可以给这个内存提交数据或取数据；

vueX文件中的几个属性（vuex文件–src/store/index.js）
初始的vuex文件

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

Vue.use(Vuex)

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

state
用来定义一个数据，用法类似vue文件中的data
使用 $store.state.数据名 来调用数据
或者 导入 mapState 在计算属性中使用mapState 模板中可以直接使用计算属性

import { mapState } from 'vuex'

 computed: {
 ...mapState(['count']), // 可以直接调用count 效果等同于 $store.state.count
 }

mutations
不能再vue文件（组件）中直接修改state的数据，需要使用mutations定义方法来修改state的数据

mutations: {
add(state) { // 方法接收的参数为state对象
 state.count++
 }
}

触发方法的方式

// 基本
this.$store.commit('add')

// 导入mapMutations
import { mapMutations } from 'vuex'
methods: {
 ...mapMutations(['sub', 'subN']), // 可直接调用方法
 }
 // 可以传参，但mutations中只能接收一个参数

actions
mutations中只能处理同步的任务，不能处理异步任务，而actions不能修改state对象的值，所以可以再actions中异步调用mutations中的方法来异步处理state的数据

actions: {
 addAsync(context) {
 	setTimeout(() => {
 		// 在 actions 中，不能直接修改 state 中的数据；
 		// 必须通过 context.commit() 触发某个 mutation 才行
		 context.commit('add')
 	}, 1000)
 }
}

触发actions中的方法

// 基本方法
this.$store.dispatch('addAsync')

//  导入mapActions
import { mapActions } from 'vuex'
methods: { 
 ...mapActions(['subAsync', 'subNAsync']),
 }
 // 传参也是只能传一个参数

注意: 异步方法中如果要修改数据, 仍然要调用mutations中声明的方法

getters
作用：当读取的值需要进一步处理时，可以使用getters

定义一个方法，接收state作为参数，return 返回处理结果

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

调用getters中的方法

// 基本使用
$store.getters.showNum

// 导入mapGetters
import { mapGetters } from 'vuex'
computed: {
 ...mapGetters(['showNum'])
 },