vuex 状态管理的初步使用

使用步骤

1. 引入

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

2. 创建store实例化

const store = new Vuex.Store({
state,
getters,
mutations，
actions
})

state:类似于vue中的data 用于处理的数据
getters:类似于vue中的computed，可以作为state的统一出口
mutation:类似于vue中的methods 但是只可以进行同步处理 ，且对state(data)中的数据的修改只可在此处进行,且无法获取到getters里的内容
action: -1 异步操作在这里进行 2 所有同步处理（mutation）的统一出口

3. 注入灵魂（demo）

const state={ count:0 }

const getters={
  evenOrodd:state=>state.count%2==0?'even':'odd'
}
const mutations={
  increace(state){
    state.count++
  },
  decrease(state){
    state.count--
  },
  increaofOdd(state){
    if((state.count+1)%2==0?'even':'odd'}){
      state.count++
    }  
  }
}

const actions={
    increaseAsync({commit}){
    setInterval(()=>{
      commit(’increace‘)
    },1000)    
  }
}

方法中用了结构赋值来传入触发事件commit
actions 无法修改state的数据，只能通过commit来触发事件来调用mutation中的方法