vuex 初步理解

new Vuex.Store({
  state, // 状态
  getters, // 
  mutations,  // 突然变化了
  actions, // 触发mutations
})

mutations

当执行程序时state突然发生变化成为mutations
mutation的第一个参数是网站的state

const mutations = {
  increment(state) { // 每个mutations方法里第一个参数都是state
    state.count++
  },
  decrement(state) {
    state.count--
  }
}

actions

actions引起副作用和异步操作的函数
actions可以包含任意异步操作
actions不改变state只进行commit到mutations

const actions = {
  increment: ({ commit }) => commit('increment'),
  decrement: ({ commt }) => commit('decrement'),
  incrementIfOdd({ commit, state }) {
    if ((state.count + 1) % 2 === 0) {
      commit('increment ')
    }
  },
  incrementAsync({
    commit
  }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('increment')
        resolve()
      }, 1000)
    })
  }
}

getters

可以当做计算属性来写，所有的getter接受一个完整的state做第一个参数

const getters = {
  evenOrOdd: state => state.count % 2 === 0 ? '偶数' : '奇数'
}

模板里

<template>
  <div id="app">
    <!--file : /my-project/src/vuex-demo/v02_counter.vue -->
    <h1>点击: {{ $store.state.count }} 次数,此為 {{ evenOrOdd }} <br></h1>
    <button class="btn"  @click="increment">+</button>
    <button class="btn"  @click="decrement">-</button><br>
    <button class="btn"  @click="incrementIfOdd">业务设计：当 奇数时，才增加</button><br>
    <button class="btn"  @click="incrementAsync">业务设计：1秒后，才会增加 1</button><br>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex' // 使用了mapGetters和mapActions
export default {
  computed: mapGetters([ // 当做了计算属性来写，操作是在store.js里
    'evenOrOdd' 
  ]),
  methods: mapActions([ // 执行actions, actions 中commit到mutations在store.js里
    'increment',
    'decrement',
    'incrementIfOdd',
    'incrementAsync'
  ])
}
</script>