vuex全局状态管理

// 定义Mutation
  const store = new Vuex.Store({
    state: {
      count: 0
    },
    mutations: {
      addN(state, step) {
        // 变更状态
        state.count += step
      }
    }
  })

// 触发mutation
  methods: {
    handle2() {
      // 在调用 commit 函数，
      // 触发 mutations 时携带参数
      this.$store.commit('addN', 3)
    }
  }     

this.$store.commit() 是触发 mutations 的第一种方式，触发 mutations 的第二种方式：

import { mapMutations } from 'vuex'




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

触发 actions 异步任务时携带参数：

// 定义 Action
  const store = new Vuex.Store({
    // ...省略其他代码
    mutations: {
      addN(state, step) {
        state.count += step
      }
    },
    actions: {
      addNAsync(context, step) {
        setTimeout(() => {
          context.commit('addN', step)
        }, 1000)
      }    
    }
  })     

// 触发 Action
  methods: {
    handle() {
      // 在调用 dispatch 函数，
      // 触发 actions 时携带参数
      this.$store.dispatch('addNAsync', 5)
    }
  }     

Getter 用于对 Store 中的数据进行加工处理形成新的数据。

Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性。 Store 中数据发生变化，Getter 的数据也会跟着变化。

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

this.$store.getters.名称

import { mapGetters } from 'vuex'

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