vue之vuex的简单使用简化写法

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
//状态对象
const state={
  counter:0
}
//包含多个更新state函数的对象
const mutations={
  ADD(state){
    state.counter++
  },JJ(state){
    state.counter--
  }
}
//包含多个事件回调函数的对象,actions调用mutations
const actions={
  add({commit}){
    commit('ADD');
  },
  jj({commit}){
    commit('JJ');
  },
  //待条件的action
  jjadd({commit,state}){
    if(state.counter%2===1)
    commit('ADD');
  },
  autoadd({commit}){
    setTimeout(()=>{
      commit('ADD');
    },1000)
  }
}
//包含多个更新state函数的对象
const getters={
  desc(state){//不需要亲自调用，只需要读取属性值
    return state.counter%2===0?'偶数':'奇数';
  }
}
export default new Vuex.Store({
  state,//状态对象
  mutations,//包含多个更新state函数的对象
  actions,//包含多个事件回调函数的对象
  getters//包含多个getter计算属性函数的对象
})

mian.js

//入口js，创建vue实例
import Vue from 'vue'

import App from './App.vue'

import store from './store'


new Vue({
  el:'#app',
  components:{
    App,

  },
  template:'',
  store,//所有的组件对象都多了一个$store属性
})

vue.app