09月26, 2019

vuex

vuex的一个流程

取状态

...mapState(['hasLogin']) 用this.hasLogin

this.$store.state.count //单个

调用action中的方法 ...mapActions(['login']) this.login(参数)

action 请求api的接口 context.commit('login')调用mutations中的方法 改变状态

async login(context, 参数) {
    const res = await api.token.create(userInfo);//请求登录接口,返回用户名和token
    context.commit('login'); //修改登录状态        
        //完整写法
        context.commit({
          type: '名字',
          amount: 10  //传参 也叫载荷
        })

},

mutations

login(state) {
    state.hasLogin = true;
},

什么是vuex

专门为vue.js应用程序开发的状态管理模式,采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态发生可预测的变化。

state

1.获取:this.$store.state.count 获取vuex中的数据一般写在computed(计算)中

mapState 辅助函数

...mapState({ // ... })

Getter

可以认为是store 的计算属性,store里面的一些值需要计算才返回,在这个中进行

mapGetters 辅助函数

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性:

...mapGetters([ 'doneTodosCount', ])

Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation,mutation的函数不能直接调用。 必须是同步函数

调用:store.commit(名字)

store.commit({ type: '名字', amount: 10 //传参 也叫载荷 })

1.在组件中提交

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷:
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }

action

为了处理异步的东西因为mutation只能是同步;

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters,但是context 对象不是 store 实例本身

1.Action 通过 store.dispatch 方法触发

store.dispatch('increment')

// 以载荷形式分发

store.dispatch('incrementAsync', {
  amount: 10
})

// 以对象形式分发

store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

2.在组件中使用action

this.$store.dispatch('xxx')
  ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷:
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })

modules

本文链接:http://zzl.bzpwhite.cn/post/vuex.html

-- EOF --

Comments