vuex的使用

Posted 2020-11-17 l8l8

import Vue from ‘vue‘
import Vuex from ‘vuex‘
import axios from ‘axios‘

Vue.use(Vuex);

const state = {
    count:10 //用来定义数据存数据    此处的数据可以在actions里面去接收一下
}
const mutations = { //处理数据动作 默认接收一个state 主要处理数据的变化  处理actions的数据
    go(state){
        state.count++
    },
    ww(state){
        state.count--
    },
    xx(state){
        state.count++
    },
    cc(state){
        state.count--
    }
}
const getters = {    //在前端组件里只能在computed里接收数据
    count(state){
        return state.b  
    },
    getOdd(state){
        return state.count%2===0?‘偶数‘:‘奇数‘
    }
}
const actions = { //提交数据动作   接收methods里的方法

  go: ({commit}) => {
     console.log(commit)
    commit(‘go‘);
  },
  ww({commit}){
    commit(‘ww‘);
  },
  xx({commit,state}){
      if(commit.count%2===0){
        commit(‘xx‘)
      }
  },
  cc({commit}){  //这里异步可以实现ajax请求
      new Promise((resolve)=>{
          setTimeout(function(){
            commit(‘cc‘)
          },1000);
      })
  }
}

export default new Vuex.Store({
  actions,
  mutations,
  getters,
  state
})