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 ? '偶数' : '奇数'

}

模板里

 

   

   

点击: {{ $store.state.count }} 次数,此為 {{ evenOrOdd }}

+

-

业务设计：当 奇数时，才增加

业务设计：1秒后，才会增加 1

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'

])

}