Gestión modular del uso avanzado del centro de gestión estatal vuex

1. En la carpeta de la tienda, cree un nuevo archivo test.js para almacenar los parámetros y los métodos relacionados del módulo de prueba. Tenga en cuenta que el contenido se incluye en la exportación predeterminada{}, sin el nuevo Vuex.Store en el index.js original de forma predeterminada.

export default{     // 和index.js中不同，没有new Vuex.Store
    state: {
        count:0,  // 相当于data
        num:1,
      },
      getters: {
        doubleCount(state){
          return 2 * state.count
        }
      },
      mutations: {  // 注意，函数实参为state
        add(state){
          state.count ++
        },
        decrease(state){
          state.count --
        }
      },
      actions: {
        delayAdd(context){ // 主要，函数实参为context
          setTimeout(() => {
            context.commit('add')
          }, 1000);
        }
      },
}

2. Cambie el archivo store->index.js, importe el nuevo test.js y declare este módulo en los módulos en la exportación predeterminada.

import Vue from 'vue'
import Vuex from 'vuex'
import test from './test' // 引入模块

Vue.use(Vuex)

export default new Vuex.Store({
  modules:{ // 设置模块
    test
  }

  
})

3. Introduzca la tienda en main.js, cambie la ubicación predeterminada de la tienda a store/index

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/index' // 改变引入store
// import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false

//导航守卫，每次切换路由时触发
router.beforeEach((to, from, next)=>{
  console.log(to.path)
  next()
})

// Vue.use(ElementUI);
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

4. En Parent.vue, donde se usa este módulo, el método de introducción de estado no puede usar cadenas directamente, y se debe usar la función de flecha state => state.test.count

<template>
    <div style="background-color: dodgerblue;">
        <!-- 读取store参数 方法一: $store.state.count -->
        <h3>Parent <span style="color: red;">{
   
   { count }}</span></h3>
        <!-- 读取store参数 方法二: this.$store.state.count 赋值到本地 -->
        <!-- <h5>count: {
   
   { count }}</h5> -->


        <!-- 读取getters中的数 -->
        <h3>getters : {
   
   { doubleCount }}</h3>
        <button @click="add">add</button>
        <button @click="decrease">decrease</button>
        <m-child></m-child>
    </div>
</template>

<script>

import MChild from './Child.vue'
import { mapMutations, mapState,mapGetters } from 'vuex'
export default {
    // computed: {
    //     // vuex，store中维护的数据，计算给count变量
    //     count() {
    //         return this.$store.state.count
    //     }
    // },

    // computed:mapState({
    //     count:'count'
    // }),

    computed:{
        ...mapState({
            // count:'count'
            count: state =>state.test.count
        }),
         
        // ...mapState([
        //     count
        // ]),

        // doubleCount(){
        //     return this.$store.getters.doubleCount
        // }

        ...mapGetters([
            'doubleCount'
        ])
    },

    data() {
        return {
            msg: 'df'
        }
    },

    methods:{
        ...mapMutations(['add','decrease']),   // 注意这里要用引号把函数名引起来
    },

    components: {
        MChild,
    },
    mounted() {
        console.log(this.$store.state)
    }
}

</script>

<style></style>