vue基础之vuex状态管理器记录

写这篇文章是因为有时候用不到vuex,就老是忘记怎么用（估计年纪大了），记录一下，方便查看！！

项目src文件下面创建store文件夹，然后文件夹里面创建index文件

定义：

import Vue from 'vue'
import Vuex from 'vuex'
//挂载Vuex
Vue.use(Vuex)
//创建VueX对象
const store = new Vuex.Store({
  //state定义属性
  state: {
    count: 0,
  },
  //只有mutations才能变更store中的数据,不能在mutations函数中执行异步操作
  mutations: {
    addition(state) {
      state.count++
    },
    addition2(state, step) {
      state.count += step
    },
    subtraction(state) {
      state.count--
    },
    subtraction2(state, step) {
      state.count -= step
    }
  },
  //actions用于异步操作，但是在action中要通过触发mutation的方式来变更数据
  actions: {
    addAsync(context) {
      setTimeout(() => {
        context.commit('addition')//addition是mutations中的函数
      }, 1000)
    },
    addAsync2(context, step) {
      setTimeout(() => {
        context.commit('addition2', step)//addition是mutations中的函数
      }, 1000)
    },

    subAsync(context) {
      setTimeout(() => {
        context.commit('subtraction')//addition是mutations中的函数
      }, 1000)
    },
    subAsync2(context, step) {
      setTimeout(() => {
        context.commit('subtraction2', step)//addition是mutations中的函数
      }, 1000)
    },
  },
  //getters 不会修改state里面是数据,获取最新的数据
  getters:{
    shownum(state){
      return '当前最新的值为【'+state.count+'】'
    }
  }
})

export default store

访问一：

访问二：