Vuex 核心功能与组件通信

1. 简单计数器案例：

   html

   <!-- App.vue -->
   <template>
     <div>
       <h2>当前数值：{{ $store.state.num }}</h2>
       <button @click="increment">+1</button>
     </div>
   </template>
   
   <script>
   export default {
     methods: {
       increment() {
         this.$store.commit('INCREMENT')
       }
     }
   }
   </script>
   

2. Store 配置：

   javascript

   // store/index.js
   export default new Vuex.Store({
     state: { num: 0 },
     mutations: {
       INCREMENT(state) {
         state.num++
       }
     }
   })
   

3. 多组件数据共享：

   javascript

   // Store配置
   state: { studentList: [] },
   mutations: {
     ADD_STUDENT(state, student) {
       state.studentList.unshift(student)
     }
   }
   
   // 组件调用
   this.$store.commit('ADD_STUDENT', { id: Date.now(), name: this.name })