首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vuex五大属性和使用说明

vuex中五大属性和使用说明(包括辅助函数)

2023-05-25 09:09:57 作者：学后端的小萝卜头

这篇文章主要介绍了vuex中五大属性和使用说明(包括辅助函数)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vuex有五个核心概念

state
getters
mutations
actions
modules

1.state

vuex的基本数据，用来存储变量

// state存储基本数据
state: {
    userId: '',
  }

在vue中使用 this.$store.state.userId

我们可以通过Vue的Computed获得Vuex的state

// An highlighted block
const store = new Vuex.Store({
    state: {
        count:0
    }
})
const app = new Vue({
    //..
    store,
    computed: {
        count: function(){
            return this.$store.state.count
        }
    },
    //..
})

mapState辅助函数

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。

为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键。

// 映射计算属性
computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
])

2.geeter

从基本数据(state)派生的数据，相当于state的计算属性,具有返回值的方法

// getter
getter: {
    userIdDouble: function(state){
      return state.userId * 2
  }

在vue中使用 this.$store.getters.userIdDouble

与state一样，我们也可以通过Vue的Computed获得Vuex的getters。

getters接收state作为其第一个参数，接受其他 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 辅助函数

与state一样，我们也可以通过Vue的Computed获得Vuex的getters

const app = new Vue({
   //..
   store,
   computed: {
       count: function(){
           return this.$store.state.count
       },
       countDouble: function(){
           return this.$store.getters.countDouble
       },
       countDoubleAndDouble: function(){
           return this.$store.getters.countDoubleAndDouble
       }
   },
   //..
})

3. mutation

提交更新数据的方法，必须是同步的(如果需要异步使用action)。

每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。提交mutation是更改Vuex中的store中的状态的唯一方法。

mutation必须是同步的，如果要异步需要使用action。

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

// mutations
 mutations: {
   SET_USER: (state, userId) => {
     state.userId = userId
   },
 },

commit：同步操作，写法： this. s t o r e . c o m m i t ( ‘ m u t a t i o n s 方法名 ’ , 值 ) t h i s . store.commit(‘mutations方法名’,值) this. store.commit(‘mutations方法名’,值)this.store.commit(‘SET_USER’,‘123456’)

使用mapMutations–代替 $store.commit()- 传参的时候直接在行内写参数就可以了-

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')
  })
}
}

4. action

和mutation的功能大致相同，不同之处在于 ==》

1. Action 提交的是 mutation，而不是直接变更状态。

2. Action 可以包含任意异步操作。Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。

// actions
actions: { // {} 是es6中解构，把对象解构成属性
  login({ commit }, value) {
    commit('SET_USER', value)
    // commit('SET_TOKEN', value2)
  },
  }

dispatch：异步操作，写法：

this.$store.dispatch(‘mutations方法名',值)

mapActions辅助函数

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

// An highlighted block
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. modules

模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

简单来说就是可以把以上的 state、mutation、action、getters 整合成一个user.js,然后放到store.js里面

vuex的五大属性关系一览

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。