vuex的基本用法（提炼公共文件import all vuex modules）

最新推荐文章于 2024-04-07 17:55:26 发布

原创最新推荐文章于 2024-04-07 17:55:26 发布 · 451 阅读

0 ·

CC 4.0 BY-SA版权

vuex 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在 Vue.js 项目中使用 Vuex 进行模块化状态管理。首先确保 package.json 中有 vuex 的依赖，然后在 src/store 目录下创建 store/modules/vuex 文件夹，将不同状态存储在独立的 js 文件中。通过在 index.js 中引入所有模块，简化管理和更新。在 main.js 中注入 Vuex 并在组件中使用 mapState 和 mapMutations 方法来访问和修改状态。这样可以方便地扩展和维护应用的状态管理。

1、第一步是你的package.json中需要有 “vuex”: “3.5.1”；如果没有安装vuex,就先安装一下

2、在src下创建一个文件store，store下创建一个文件modules, index.js; 下面继续创建文件
最终的目录文件如下：
在这里插入图片描述
从最里面开始：

store/modules/vuex/modules 文件用于存放项目中所有的需要利用vuex存储的数据文件；这里里global.js为例
store/modules/vuex/modules/global.js 中：

 export default {
  namespaced: true,
  state: {
    // 页面缓存后是否显示模态框标记
    showModel: false // 标记是否显示模态框
  },
  mutations: {
    /** 设置是否显示模态框的值 */
    setShowModel(state, flag) {
      state.showModel = flag
    }
  }
}

说明：在vuex/modules文件中可以创建很多的js文件，然后在store/modules/vuex/index.js中进行全部引入，避免每次创建，都需要手动的引入文件。
3. store/modules/vuex/index.js 中：

在这里插入代码片const files = require.context('./modules', false, /\.js$/)
const modules = {}

files.keys().forEach(key => {
  modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
})

export default {
  namespaced: true,
  modules
}

在store/index.js 进行引入

import Vue from 'vue'
import Vuex from 'vuex'

import vuex from './modules/vuex'

Vue.use(Vuex)

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

在main.js中注入

import store from './store'
new Vue({
  el: '#app',
  router,
  store, // store加入
  render: h => h(App)
})

然后去想用的界面使用：

<template>
  <div id="app">
    <router-view />
    <div v-if="showModel">
      测试
    </div>
    <button @click="btnClick">点击改变showModel的值</button>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'App',
  computed: {
    ...mapState('vuex/global', [
      'showModel' // 映射this.showModel为this.$store.state.showModel
    ])
  },
  methods: {
    ...mapMutations('vuex/global', ['setShowModel']),
    btnClick(){
    	this.setShowModel(!this.showModel)
    }
  }
}
</script>
<style lang="scss"></style>