vue中vuex的辅助函数使用方式

297 字

1 分钟

vue中vuex的辅助函数使用方式

2023-10-11

front-end

vue

/

vuex

/

front-end

参考 vuex官网

1.页面引入#

1
import { mapGetters, mapState, mapMutations, mapActions } from 'vuex';

在vue的页面中引用辅助函数

2.页面中使用#

1
computed: {
2
  ...mapState('xxxMaterial', ['xxxList'])
3
}

其中 mapState,mapGetters在computed中引用, 此时参数直接挂载到了页面的this中，直接this.引用即可。

1
methods: {
2
  ...mapActions('xxxMaterial', ['queryList']),
3
}

mapMutations,mapActions在methods中引用在工程中使用若是store的设置复杂后，会产生store之间调用的场景。

1
saveMaterialApp({ commit, state, rootState, rootGetters }, {
2
   remark
3
}) {
4
  // 保存参数整合
5
  let params = {
6
    ..rootState.material.xxx.xxx, // 引用了其他namespace中state的参数
7
    remark
8
  }
9
  return app.saveMaterial(params).then(
10
                         ...
11
  ).catch(err => {
12
     return false;
13
 })
14
}

而在actions中，可以直接通过参数rootState和rootGetters直接调用其余namespace中的参数。

1
actions: {
2
      // 在这个模块中， dispatch 和 commit 也被局部化了
3
      // 他们可以接受 `root` 属性以访问根 dispatch 或 commit
4
      someAction ({ dispatch, commit, getters, rootGetters }) {
5
        getters.someGetter // -> 'foo/someGetter'
6
        rootGetters.someGetter // -> 'someGetter'
7
        rootGetters['bar/someGetter'] // -> 'bar/someGetter'
8

9
        dispatch('someOtherAction') // -> 'foo/someOtherAction'
10
        dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction'
11

12
        commit('someMutation') // -> 'foo/someMutation'
13
        commit('someMutation', null, { root: true }) // -> 'someMutation'
14
      },
15
      someOtherAction (ctx, payload) { ... }
16
}