Vuex小白必看：如何轻松get数据、惊喜发现store的新玩法

哈喽！今天咱来聊聊一个超给劲的话题，你准备好了么？

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const state = {
 number: 0
}
export default new Vuex.Store({
 state,
});

别忘了搞明白Vuex里面那个数据来源这个地方挺重要的。想在网页上展现你自己的数据？那就直接把它们塞进这里面好了！啥？不懂得怎么提取$store.state里面现在的数值？别急，我马上给你讲解哈。

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const state = {
 number: 0
}
const getters = {
 getNumber(state) {
  return state.number + 1
 }
}
export default new Vuex.Store({
 state,
 getters,
});

别急告诉你个事儿。Vuex这个大宝贝儿有个超好用的功能，叫”getter”，就好比给你的store里加了个计算器，你想要啥属性，就用这个getter，然后用$store.getters.getNumber来获取到那个值。不过得注意，当你从属性那里去找getter时，Vue的响应式系统已经帮你保存好了。

const state = {
 number: 1
}
const getters = {
 getNumber(state) {
  return state.number + 1 // 2
 },
 getDoubNUmber(state, getters) {
  return state.number + getters.getNumber // 3
 }
}

实际上，setter和getter挺方便的，问题就是每次访问都会计算，比如$this.$store.getters.filterNumber(3)这种方式，不管什么时候都得重新计算。

const state = {
 number: 1,
 list: [1, 2, 3, 4, 5]
}
const getters = {
 getNumber(state) {
  return state.number + 1 // 2
 },
 getDoubNumber(state, getters) {
  return state.number + getters.getNumber // 3
 },
 filterNumber:(state)=>(num)=> {
  return state.list.find(item=> item%num === 0)
 } 
}
export default new Vuex.Store({
 state,
 getters,
});

等等有个好消息要告诉你。在Vuex里，想要更换状态的话，就得用上mutations了。看起来有点麻烦，其实跟咱们平时搞的事件是差不多的。每个mutation都是根据event type和callback function来设定的，而且就是靠这个function才能够改变你的状态！其中，function是把state当作第一个参数带进来，当然，你也可以自己加上其他东西。

你知道吗，Vuex里的mutation都是同步执行。要是碰上需要等很久的操作该怎么办？

const mutations = {
 increment(state, n) {
 state.number += n
 }
}

没事，告诉你怎么做。官方说我们不能随便提交commit直接改状态，得先用提交action。接下来，就要在action中利用mutation调参数了，这样才是硬道理，放心

今儿学了下Vuex，大家有什么心得吗？别忘了在要拿网页数据时要用到的$store.state这个小技巧哟。另外，getters和mutations这两个玩意儿你掌握使用了没？关键时刻，像异步操作用action搞定就行了。

const mutations = {
 increment(state, payload) {
 state.number += payload.count
 }
}

今天就到这了！你们有啥想要讨论的就在评论区留言！别忘了给我点赞分享出去~

// 或者另一种方式是直接使用包含 type 属性的对象进行提交：
this.$store.commit({
 type: 'increment',
 count: 1
})