vuex模块化分装

文件结构

modules文件夹

例如：parks.js中代码如下
state：存放parks模块中的全局使用的变量
mutations ：修改state中的变量
actions ：异步请求

特别提示：观看时注重文件里面的结构，代码内容可以忽略，根据自己项目需求

const state = {
  parks: '',
}

const mutations = {
  UPDATE_PARKS: (state, parks) => {
    state.parks = parks
  },
}

const actions = {
  
  async updateParks({ commit }) {
    let parks
    try {
      parks = await fetchNameAndId('parkings')
    } catch {
      removePark()
      commit('UPDATE_PARK', '')
      return false
    }

    const { data } = parks
    if (data.length === 0) {
      removePark()
      commit('UPDATE_PARK', '')
      return false
    }

    commit('UPDATE_PARKS', data)
    const park = data[0].id

    if (getPark()) {
      const index = data.findIndex(item => {
        return item.id === getPark()
      })
      if (index === -1) {
        setPark(park)
        commit('UPDATE_PARK', park)
      } else {
        commit('UPDATE_PARK', getPark())
      }
    } else {
      setPark(park)
      commit('UPDATE_PARK', park)
    }
  },

  updatePark({ commit }, park) {
    setPark(park)
    commit('UPDATE_PARK', park)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

getters.js文件

const getters = {
 parks: state => state.parks.parks
}
export default getters

index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)

const modulesFiles = require.context('./modules', true, /\.js$/)

const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default

  return modules
}, {})

const store = new Vuex.Store({
  modules,
  getters
})

如何使用

方法一：

import store from './store'
const parks=store.getters.parks

方法二：

import { mapGetters } from 'vuex'
export default {
computed: {
    ...mapGetters(['parks'])
  },
}

如何修改

// 修改
this.$store.commit('parks/parks', params)
this.$store.dispatch('parks/parks', params)
// 刷新
this.$store.dispatch('parks/parks')

// commit和dispatch的区别
// dispatch： 含有异步操作，例如向后台提交数据，写法： this.$store.dispatch(‘action方法名’,值)
// commit：同步操作，写法：this.$store.commit(‘mutations方法名’,值)