vuex的写法

一只野生的小飞龙

已于 2022-10-17 20:14:19 修改

阅读量360

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-07-20 13:31:17 首次发布

本文链接：https://blog.csdn.net/qq_45404030/article/details/125890309

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

不同模块的内容

const moduleA = {
  state: {
    b: 1
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  }
}

export default new Vuex.Store({
  modules: {
    a: moduleA
  }
})

通过mapState

computed: {
    ...mapState({
    // state.a也就是代表哪个模块的
    //.b也就是state里面的b
      b: state => state.a.b
    })
  },

给module添加相对应的mapState等辅助函数实现对自己模块内容的调用。

这个好处就是不在需要引入某某模块名称下的内容，直接引入就可以。

首先创建一个模块

//index.js
import state from './state'
import mutations from './mutations'
import getters from './getter'
export default {
  namespaced: true,
  state,
  mutations,
  getters
}

然后创建helper文件夹，给每个模块添加辅助函数

import { createNamespacedHelpers } from 'vuex'
export const { mapState, mapMutations, mapGetters, mapActions } = 
//music就是模块名称
createNamespacedHelpers('music')

然后直接在我们需要引入vuex的模块中写入这个helper函数就可以。

import { mapMutations, mapGetters } from '@/store/helper/music.js'
//这样引入即可。
...mapGetters(['值'])

如果你想要观察vuex数据的变化，可以通过vuex当中内置的东西

import createLogger from 'vuex/dist/logger'
const debug = process.env.NODE_ENV !== 'production'
// vuex实现插件然后可以观察数据的变化
  plugins: debug ? [createLogger()] : []