vux

概念：vux是一个专为Vue.js应用程序开发的状态管理模式。也就是管理公共数据的地方。

 

state

 

单一状态树，也叫单一数据源，我们可以把需要的数据放里面。

 

如果里面放置了counter:100，
state:{
    counter:100
}
我们可以通过$store.state.counter取出{{$store.state.counter}}

 

getters

 

有时候，我们需要从store中获取后写state变异后的状态，比如state*2等一些复杂操作。

 

getters:{
    powercounter(state){
        return state.counter*state.counter
    }
}
当我们需要取出时
{{$store.getters.powercounter}}
如果需要递归则：
getters:{
    powercounter(state){
        return state.counter*getters
    }
}
//返回函数

mutation

 

通常情况，Vue要求我们vue的store的更新唯一方式就是：提交mutation

 

mutation主要包括两部分：

 

• 字符串的事件类型（type）

• 一个回调函数（handle），该回调函数的第一个参数就是state

 

mutations:{
    increment(state){
        state.counter++
    },
    decrement(state){
        state.counter--
    },
    incrementcount(state,count){
        return state+=count
    }
}
通过mutation更新的时候，
普通提交封装：
this.$store.commit('increment')
addcount(count){
    this.$store.commit('increment',count)
}

特殊提交封装：
this.$store.commit({
    type:'incrementcount',
    count:count
})

假如有很多参数需要传递，这个时候我们通常会以对象的形式传递，也就是payload是一个对象。

 

changcount(state,payload){
    state.count+=payload.count
}
changecount(){
    this.$store.commit('changecount',{count:0})
}

使用常量替代 Mutation 事件类型

 

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'

const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }
})

 

action

 

actions:{
    //context上下文
    aupdateinfo(context){
        setTimeout(()=>{
            //必须执行mutation内的方法
            context.commit('updateInfo')
        },1000)
    }
}
//调用的时候
this.$store.dispatch('aupdateinfo',{
    payload:'我是携带的信息',
    success:()=>{
        console.log("finished")
    }
})

module

 

如果需要管理的数据比较多，可以在module中分模块

 

 

//取值的时候
this.$store.state.a.name