vuex 状态管理的初步使用

2018-11-26  本文已影响0人  clumsy钧

使用步骤

  1. 引入
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
  1. 创建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)的统一出口

  1. 注入灵魂(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中的方法

上一篇 下一篇

猜你喜欢

热点阅读