vuex 构建模块化使用

vuex是什么？

先引用官方原话：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

通俗来说，vuex就是管理全局的变量，可以在任何组件中调用和修改数据。父子组件通信时，我们通常会采用 props + emit 这种方式。但当通信双方不是父子组件甚至压根不存在相关联系，或者一个状态需要共享给多个组件时，就会非常麻烦，数据也会相当难维护，这对我们开发来讲就很不友好。vuex 这个时候就很实用，不过在使用vuex之后也带来了更多的概念和框架，需慎重！

vuex有几个模块？

vuex一共分为五个模块 State、gertters、mutations、actions、mudules（模块化）
他们之间的关系图：

image.png

State ：单一状态树，类似vue中的data，存放数据的。
getters：计算属性，类似于computed一样，当它的依赖值发生变化的时候，它就会重新计算赋值，并有缓存。
mutations：操作state数据（同步）
actions：action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。
mudules:模块化状态管理

代码实现

代码模块化

store 下的index.js

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

import modules from './modules_export'

Vue.use(Vuex)

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

store下的modules_export.js

const files = require.context('./modules', false, /\.js$/)
const modules = {}

files.keys().forEach(key => {
  modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
})
//console.log(modules);
export default {
  namespaced: true,
  modules
}

store下的 mudules文件下的index.js


//组件通过 this.$store.dispatch(''，data) 对actions 的方法，然后用commit对mutations操作 
export default {
    namespaced: true,
    state: {
        //存放键值所在的管理状态
        name: 123
    },
    getters: {
        //使用this.$store.getters.g_name   可以获取state中的name值
        g_name: state => {
            return state.name
        }
    },
    actions: {
        a_edit1(context, payload) {
            return new Promise((resolve) => {
                setTimeout(() => {
                    context.commit('m_edit1', payload)
                    resolve()
                }, 2000)
            })
        }
    },
    mutations: {
        m_edit1(state, data) {
            state.name += data
        }
    },
}

main.js中的配置

import Vue from 'vue'
import App from './App.vue'
import store from './store'


Vue.config.productionTip = false

new Vue({
  store,//将vuex挂载在vue实例
  render: h => h(App),
}).$mount('#app')

组件中使用vuex

<template>
  <div id="app">
     <h1>{{g_name}}</h1>
     <button style="margin:10px" @click="add1">加1</button>
  </div>
</template>

<script>
import { mapGetters,mapActions } from "vuex"; //储存数据
export default {
  name: 'App',
  data(){
    return{

    }
  },
  computed: {
    ...mapGetters("modules/index", ["g_name"])
  },
  methods: {
    ...mapActions("modules/index",['a_edit1']),
    add1(){
      this.$store.dispatch('modules/index/a_edit1',1);
      console.log(this.g_name)
    },
  },
}

</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

以上是vuex模块化基础使用