【Vue基础】Vuex全局管理的基本代码结构及其使用

一、代码结构及其使用

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  //提供唯一的公共数据源
  state: {
  	list:[]
  },
  //用于变更state中的数据，必须是同步函数
  mutations: {
  },
  //用于变更state中的数据，不能直接修改，需要通过context.commit()操作mutation，
  //但是可以写异步操作
  actions: {
  },
  //模块化，可以导入其他的store
  modules: {
  }
})

官方图示：

---

1. state ：提供唯一的公共数据源

所有共享的数据都要统一放在Store的 state 中进行存储；

组件访问 state 中数据的第一种方式：this.$store.state.全局数据名称

组件访问 state 中数据的第二种方式 - mapState函数：

①从vuex中按需导入mapState函数：import { mapState} from 'vuex'

②通过 mapState 函数，将当前组件需要的全局数据映射为当前组件的computed计算属性：

import { mapState } from 'vuex'

 computed: {
    ...mapState({
      // 三种写法：
      // list: state => state.list
      // list: "list"  这个写法慎用，可能有问题
      list: state => {
        return state.list;
      }
    })
  },

---

2. mutations ：用于变更state中的数据，必须是同步函数

①Vuex中应该通过mutation变更state中的数据，而不是直接操作state中的数据。

②通过这种方式虽然操作起来繁琐一些，但是可以集中监控所有数据的变化。

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

调用mutations中函数的第一种方式：this.$store.commit(‘函数名’)

methods:{
  handle1(){
  	this.$store.commit('add')
  }
}

如果需要传递参数，则在mutations中定义时写入形参，调用时传入实参：

export default new Vuex.Store({
  state: {
  	num:1
  },
  mutations: {
  	add(state){
	  state.num++
	},
	addN(state,step){
		state.num += step
	}
  },
  actions: {
  },
  modules: {
  }
})

调用时传入实参：
methods:{
  handle2(){
  	this.$store.commit('addN',50)
  }
}

调用mutations中函数的第二种方式 - mapMutations函数：

①从 Vuex 中按需导入 mapMutations 函数：import { mapMutations } from 'vuex'

②通过 mapMutations 函数将需要的 mutations 中的函数映射为当前组件的 methods 方法：...mapMutations(['函数名'])

③映射完毕后，可以直接当作 methods 中的方法通过 this 调用（当然也可以直接作为绑定事件的处理函数）：

import { mapMutations } from 'vuex'

methods:{
  ...mapMutations(['add','addN']),
  handler1(){
    this.addN(12345)
  }
}

---

3. actions：用于变更state中的数据，但不能直接修改，需要通过context.commit()调用mutation，且可以包含任意的异步操作

Action 提交的是 mutation，而不是直接变更状态(state)：

export default new Vuex.Store({
  state: {
  	num:1
  },
  mutations: {
  	add(state){
	  state.num++
	},
	addN(state,step){
		state.num += step
	}
  },
  actions: {
  	async(context){
	  context.commit('add')
	}
  },
  modules: {
  }
})

在组件中调用Action的第一种方式：this.$store.dispatch(‘action名称’)

methods:{
  asyncHandler1(){
    this.$store.dispatch('async')
  }
}

如果需要包含异步操作和传参：

export default new Vuex.Store({
  state: {
  	num:1
  },
  mutations: {
  	add(state){
	  state.num++
	},
	addN(state,step){
		state.num += step
	}
  },
  actions: {
  	async2(context,step){
  		setTimeout(()=>{
  			context.commit('addN',step)
  		},1000)
	}
  },
  modules: {
  }
})

methods:{
  asyncHandler2(){
    this.$store.dispatch('async2',123)
  }
}

在组件中调用Action的第二种方式 - mapActions函数：

①从 Vuex 中按需导入 mapActions 函数：import { mapActions } from 'vuex'

②通过 mapActions 函数将需要的 actions 函数映射为当前组件的 methods 方法：...mapActions (['函数名'])

③映射完毕后，可以直接当作 methods 中的方法通过 this 调用（当然也可以直接作为绑定事件的处理函数）：

import { mapActions } from 'vuex'

methods:{
  ...mapActions (['async','async2']),
  asyncHandler3(){
    this.async2(123456)
  }
}

---

4. modules ：用于模块化导入其他store

例如新建了一个js文件，里面定义了一个storeA：

const storeA= {
    state: {
        storeANum:999
    },
    mutations: {  },
    actions: {  },
    getters: {  }
}

export {storeA}

导出后即可再另一个store中导入此模块：

import {storeA} from "@/store/storeA";

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

---

二、Getter

Getter用于对 store 中的数据进行加工处理后形成新的数据，类似 Vue 中的计算属性。

Getter不会修改store中的数据，而是起到一个包装的作用。

Store 中的数据发生变化，Getter的数据也会跟着变化。

在 Store 中配置 getters（和 actions 等平级）：

const store = new Vuex.Store({
	state:{
		count : 0
	},
	getters:{
		showNum : state => {
			return '当前最新的数量是：' + state.count
		}
	}
})

使用 getters 的第一种方式：this.$store.getters.名称

<h3>{{ $store.getters.showNum }}</h3>
<button @click="handler1"> num + 1 </button>
<button @click="asyncHandler1"> num + 1 </button>

使用 getters 的第二种方式 - mapGetters函数：

①从 Vuex 中按需导入 mapGetters 函数：import { mapGetters} from 'vuex'

②通过 mapGetters 函数将需要的 getter 映射为当前组件的 computed 计算属性：

import { mapGetters } from 'vuex'

 computed: {
    ...mapGetters(['showNum'])
  },