vuex的五个核心属性及其辅助函数

vuex的五个属性及使用

vuex是什么?

  vuex 是vue的状态管理工具,统一管理和维护vue的可变状态

vuex的五个核心属性

   state 、getters 、 actions 、 mutations、 modules

1. state

 vuex的基本数据   vuex的状态存储是响应式的,用来存储变量

 javascript
   state: {
       userId: '',
       name: '',
       token: '',
     }
     
     //vue中使用this.$store.state.userId

辅助函数 mapState

  当一个组件需要获取多个状态的时候,会声明多个计算属性,会显得重复,复杂,这时候就可以使用 辅助函数mapState 帮助我们生成计算属性

2. getters

  getters就是store的计算属性。
 getters 依赖值改变,就会重新计算

const store = new Vuex.Store({
    state: {
        count:0
    },
    getters: {
        // 单个参数
        countDouble: function(state){
            return state.count * 2
        },
        // 两个参数
        countDoubleAndDouble: function(state, getters) {
            return getters.countDouble * 2
        }
    }
})

辅助函数 mapGetters

    仅仅将store中的 getter 映射到了局部计算属性

3. mutatons

    更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
mutation必须是同步的,如果要异步需要使用action。

    每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数,提交载荷作为第二个参数。(提交荷载在大多数情况下应该是一个对象),提交荷载也可以省略的。

辅助函数 mapMutations

4. action

  • Action 提交的是 mutation,而不是直接变更状态。
  • Action 可以包含任意异步操作。
      Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。

辅助函数 mapActions

  在组件中使用 this.$store.dispatch(‘xxx’) 分发 action,或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用(需要先在根节点注入 store):


import { mapActions } from 'vuex'
 
export default {
  //..
  methods: {
    ...mapActions([
      'incrementN' //映射 this.incrementN() 为 this.$store.dispatch('incrementN')
    ]),
    ...mapActions({
      add: 'incrementN' //映射 this.add() 为 this.$store.dispatch('incrementN')
    })
  }
}

5. module

   应用很大的时候,store对象就会变得非常的臃肿
   vuex就将store分隔到模块(module)。每个模块拥有自己的 state、mutation、action、getters、甚至是嵌套子模块——从上至下进行类似的分割:


import Vuex from 'vuex';
import topNav_store from "./topNav/store.js";
import member_store from "./member/store.js";
import game_store from "./coupon/game.js";
import approval from './approval/store.js'
import setRentInfo from './contract/store.js'
export default new Vuex.Store({
    modules:{
        topNav:topNav_store,
        memberStore:member_store,
        game_store:game_store,
        approval:approval,
        setRentInfo
    }
})


相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页