简单浅显的理解Vuex(初步)

Vue-CLI 3.0集成Vuex,默认文件为store.js

内容:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
export default new Vue.Store({
    *****
})

官方文档中的五个状态:

1.State 

单一状态树,简单来说就是定义初始值的位置。

state:{
    *****
}

全局获取方法:this.$store.state.***

2.Getter

类似计算属性(实时监听),带有更新状态,获取更新后的最新状态值。

全局获取方法:this.$store.getters.***

getters:{
    ***(state){    //函数名自定
        return state.***    //state.*** => 想要监听的值
    }
}

3.Mutation

更改store中状态的唯一方法,提交mutation

定义:

mutations:{
    ***(state){    //函数名自定
        //值(状态)的变更
        state.*** = ***  //要改变的状态
    }
}

全局调用:

this.$store.commite(' *** ') // 触发一个类型为***的mutation

还可以传入额外参数(提交载荷):

mutations:{
    ***(state,n){       //函数名自定
        state.*** += n //任意操作
    }
}

调用:

this.$store.commit('***',n的值)

大多数情况,传入的应该是一个对象,好处:易读

例如文档的例子:

// ...
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
//全局调用
this.$store.commit('increment', {
  amount: 10
})

需要注意的是:muntation必须是同步函数

4.Action

写法:将mutation中想要进行异步操作的方法包裹在内

特点:提交mutation,支持异步操作(任意)

//定义
mutations:{
    increment(state){
       state.count++
    }
},
actions:{
    increment(context){
        context.commit('increment')
    }
}
//调用:
this.$store.dispatch('increment')

异步:

actions: {
  incrementAsync ({ commit }) {    //解构写法    
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

另:同样支持传值(载荷)

5.Model

允许将store分为模块:

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

如果不重定命名空间,公共调用同上,待深入

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值