Vuex状态管理库

import { createStore } from 'vuex';

// State：存储在 Vuex 中的数据
const counterModule = {
  namespaced: true, // Modules：分割成小块
  state: {
    count: 0
  },
  // Mutations：同步函数
  mutations: {
    INCREMENT(state) {
      state.count++;
    }
  }
};

// State：存储在 Vuex 中的数据
const messageModule = {
  namespaced: true, // Modules：分割成小块
  state: {
    text: 'Hello Vuex'
  },
  // Getters：计算属性
  getters: {
    uppercase(state) {
      return state.text.toUpperCase();
    }
  }
};

export default createStore({
  modules: {
    counter: counterModule,
    message: messageModule
  }
});  

<template>
  <div>
    <!-- 访问 counter 模块的 State -->
    <h1>计数器: {{ counter.count }}</h1>
    <!-- 调用 counter 模块的 Mutations -->
    <button @click="increment">+</button>
    
    <!-- 访问 message 模块的 State -->
    <h2>消息: {{ message.text }}</h2>
    <!-- 访问 message 模块的 Getters -->
    <p>大写: {{ uppercaseMessage }}</p>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex';

export default {
  computed: {
    // 映射 counter 模块的 State
    ...mapState('counter', ['count' as 'counter']),
    // 映射 message 模块的 State
    ...mapState('message', ['text' as 'message']),
    // 映射 message 模块的 Getters
    ...mapGetters('message', ['uppercase' as 'uppercaseMessage'])
  },
  methods: {
    // 映射 counter 模块的 Mutations
    ...mapMutations('counter', ['INCREMENT' as 'increment'])
  }
};
</script>