学习vuex记录；state actions mutations getter

学习视频链接为https://www.bilibili.com/video/BV1h7411N7bg?p=1

1、State

写法一

reduce.vue文件 
<template>
   <div>
        <h3>当前最新的count值{{count}}</h3>
   </div>
</template>

文件 store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    count: 0
  }
})

写法二（将全局属性映射为当前组件的计算属性）

文件reduce.js
<template>
   <div>
        <h3>当前最新的count值{{count}}</h3>
   </div>
</template>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['count'])
  },
}

2、Mutation

不可以直接修改state里面的值，要通过mutation修改state的值，便于集中监控state数据

store.js文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    add (state, num) {
      state.count += num
    },
    reduce (state, num) {
      state.count -= num
    }
  }
})

写法一

reduce.vue文件
<template>
   <div>
        <h3>当前最新的count值{{$store.state.count}}</h3>
        <button @click="handelAdd">+</button>
   </div>
</template>
<script>
export default {
  data () {
    return {}
  },
  methods: {
    handelAdd () {
      this.$store.commit('add', 3)
    }
  }
}
</script>

写法二

<template>
   <div>
        <h3>当前最新的count值{{count}}</h3>
        <button @click="reduce(1)">-</button>
   </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'

export default {
  data () {
    return {}
  },
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['reduce', 1])
  }
}
</script>

3、Actions

处理异步任务；如果通过异步操作数据必须通过Action，不能直接使用Mutation，但是需要在Action中通过触发Mutation的方式间接变更数据

写法一

store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    add (state, num) {
      state.count += num
    }
  },
  actions: {
    addAsync (context) {
      setTimeout(() => {
        context.commit('add', 1)
      }, 1000)
    }
  }
})

addtion.vue
<template>
   <div>
        <h3>当前最新的count值{{$store.state.count}}</h3>
        <button @click="handelAdd">+</button>
   </div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  methods: {
    handelAdd () {
      this.$store.dispatch('addAsync', 3)
    }
  }
}
</script>

执行顺序

注： context可以理解为vuex.Store 的实例对象

写法二：
store.js不变

reduce.vue
<template>
   <div>
        <h3>当前最新的count值{{count}}</h3>
        <button @click="handleAdd">-</button>
   </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'

export default {
  data () {
    return {
    }
  },
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['addAsync'], 1),
    handleAdd () {
      this.addAsync()
    }
  }
}
</script>

执行顺序

Getter

Getter用于对Store中的数据进行加工处理形成新的数据（类似Vue的计算属性）
Store中数据发生变化，Getter的数据也会跟着变化

写法一

reduce.vue
<template>
   <div>
        <h3>当前最新的count值{{count}}</h3>
        <h3>{{$store.getters.showNewNum}}</h3>
        <button @click="handleAdd">-</button>
   </div>
</template>

store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    showNewNum (state) {
      return '当前最新数据为' + state.count + '呀'
    }
  }
})

写法二

reduce.vue
<template>
   <div>
        {{showNewNum}}
   </div>
</template>
<script>
import { mapGetters } from 'vuex'

export default {
  data () {
    return {
    }
  },
  computed: {
    ...mapGetters(['showNewNum'])
  }
}
</script>

store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    showNewNum (state) {
      return '当前最新数据为' + state.count + '呀'
    }
  }
})