vuex

  Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
  在《快速入门(一)》中我们提到过,我们可以把 Vuex 简单的抽象为,一个全局对象(store),里面保存了所有组件公有的状态(state)。只是这个全局对象不能直接读写。需要通过特殊的读写渠道。

在 vuex 中写渠道需要用户自定义,分为 Mutations 同步设置,和 Actions 异步设置

Vuex 声明及注入

Vue.use(Vuex);

export default  new  Vuex.Store({
  state,
  getters,
  mutations,
  actions,
  modules
})

根组件中调用

import store form './store'

new Vue({
  el: '#app',
  router,
  store, 
  template: '<App/>',
  components: { App }
})

以上我们完成了,Vuex 的申明及注入 Vue 中。现在我们先来看看在申明 Vuex.Store 中,各项所代表的意思。

State

  用以保存仓库 Store 中根状态。格式如下:

export default {
    token: null, // 用户本地登录凭证,
    newCredit:false,
    loading: {
        show: false,
        msg: ''
    },
    dialogMsg: {
        msgShow: false,
        msg: '',
        timeout: null
    }
}

你没有看错,就是一个简单的对象。这些就是我们整个项目需要共享的状态(state)。

Mutations

  如果我们需要修改 state 中的状态,就需要借助 Mutations。Mutations 为我们提供了同步修改 state 的方法。

import {
    SHOW_LOADING,
    HIDE_LOADING,
    SHOW_NEW_CREDIT,
    HIDE_NEW_CREDIT,
} from './mutationTypes'


export default {
    [SHOW_LOADING](state,msg){
        state.loading = {
            show:true,
            msg
        }
    },
    [HIDE_LOADING](state){
        state.loading = Object.assign(state.loading, {show:false});
    },
    [SHOW_NEW_CREDIT](state){
        state.newCredit = true;
    },
    [HIDE_NEW_CREDIT](state){
        state.newCredit = false;
    }
}

从上面的实例,我们发现,Mutations 由一个个函数组成,函数的第一个参数为 state 。指向上面我们申明的 State 对象。第二个参数为新值。函数内执行一个同步的赋值过程。然后函数名有点怪,是为了方便管理 Mutations 函数,我们让函数名由一个独立的文件提供(这个都是小问题)。

Actions

  Actions 和 Mutations 结构一样,都提供一些函数,不一样的是,Actions 主要为异步修改 State 而生。

import {
  SET_DIALOG_MSG,
  SET_DIALOG_MSG_SHOW,
  SET_DIALOG_MSG_TIMEOUT
} from './mutationTypes'

export default {
  setDialogMsg({commit, state},msg){
    commit(SET_DIALOG_MSG,msg);
    commit(SET_DIALOG_MSG_SHOW,true);

    if(state.dialogMsg.timeout){
      clearTimeout(state.dialogMsg.timeout);
    }

    commit(SET_DIALOG_MSG_TIMEOUT,setTimeout(() =>{
      // this.msg = '';
      commit(SET_DIALOG_MSG_SHOW,false);
    },1500))
  }
}

Actions 函数也接受两个参数,第二个参数与 Mutations 函数一样,都是 state 新值。第一个参数是一个 content 对象,其中可以包含 commit 函数和 state 对象。前者是拿来帮助我们触发 Mutations 的,后则是仅供我们读取 state 中的数据

我们发现最后修改 State 状态的其实还是 Mutations 函数,Actions 只是异步去调用而已。

Getters

  Getters 是 State 的补充,当我们需要从 State 中派生出某些值时,而且多个组件同时都需要使用此派生时,我们可以把这个派生提取到 Getters 中。

export default{
doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

Modules

  目前我们介绍的共享状态都是直接保存在根状态树中的(state),这样务必会导致 state 变得很臃肿 。为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:

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 的状态

Store 的使用

  上面我们介绍了,申明 Store 时 State、Mutations、Actions、Getters 的作用。现在我们来看看,在 Vue 项目中,如何引用这些状态或方法。

mapState 辅助函数

  帮助我们把全局共享状态,引入到局部组件中。

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: {
    ...mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态,必须使用常规函数
    countPlusLocalState (state) {
    return state.count + this.localCount
    }

    // 获取 loan 模块中的状态。
    loanMoney:state => state.loan.money
    })
  }
}

当映射的计算属性的名称与 state 的子节点名称相同时,我们也可以给 mapState 传一个字符串数组。

computed: {
    ...mapState([
        // 映射 this.count 为 store.state.count
        'count'
    ])
}

mapGetters 辅助函数。

  使用方法同 mapState。

mapMutations 辅助函数

  你可以在组件中使用 this.$store.commit(‘xxx’) 提交 mutation,或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用(需要在根节点注入 store)。

import { mapMutations } from 'vuex'

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

注意,对于 mutations 是不区分根 state 中的 mutations 还是 module 中的 mutations 都是一样的引入方式。

mapActions 辅助函数

  使用方法同 mapMutations

参考文档:

vue教程
vue-loader教程
vuex教程

Logo

前往低代码交流专区

更多推荐