Vuex基础使用

Vuex是Vue.js的状态管理库，用于在Vue应用程序中共享和管理数据状态。下面是一些常用的Vuex方法的使用示例：

1. state：用于定义和存储应用程序的状态数据。

   // 在 Vuex store 中定义 state
   state: {
     count: 0
   }
   
   // 在组件中获取和使用 state
   computed: {
     count() {
       return this.$store.state.count
     }
   }
   

2. getters：用于从状态中派生计算属性。

   // 在 Vuex store 中定义 getters
   getters: {
     doubleCount: state => state.count * 2
   }
   
   // 在组件中获取和使用 getters
   computed: {
     doubleCount() {
       return this.$store.getters.doubleCount
     }
   }
   

3. mutations：用于同步修改状态的方法。

   // 在 Vuex store 中定义 mutations
   mutations: {
     increment(state) {
       state.count++
     }
   }
   
   // 在组件中触发 mutation
   methods: {
     increment() {
       this.$store.commit('increment')
     }
   }
   

4. actions：用于执行异步操作，并触发 mutations 来修改状态。

   // 在 Vuex store 中定义 actions
   actions: {
     asyncIncrement(context) {
       setTimeout(() => {
         context.commit('increment')
       }, 1000)
     }
   }
   
   // 在组件中触发 action
   methods: {
     asyncIncrement() {
       this.$store.dispatch('asyncIncrement')
     }
   }
   

5. modules：用于将 Vuex store 分割成模块化。

   // 在 Vuex store 中定义 modules
   modules: {
     cart: {
       state: {
         items: []
       },
       getters: {
         itemCount: state => state.items.length
       },
       mutations: {
         addItem(state, item) {
           state.items.push(item)
         }
       }
     }
   }
   
   // 在组件中获取和使用 modules 中的状态和方法
   computed: {
     itemCount() {
       return this.$store.state.cart.itemCount
     }
   },
   methods: {
     addItem() {
       this.$store.commit('cart/addItem', newItem)
     }
   }
   

下面是一些辅助函数mapState、mapGetters、mapActions 和 mapMutations。这些辅助函数用于简化在组件中访问 Vuex store 中状态、计算属性、异步操作和同步操作的方式。通过使用这些函数，可以避免在组件中频繁地访问 $store 对象，并且能够更方便地将状态和操作映射到组件的计算属性和方法中。

1. mapState：将 Vuex store 中的状态映射为组件的计算属性。

   import { mapState } from 'vuex'
   
   // 在组件中使用 mapState
   computed: {
     ...mapState(['count'])  // 映射 `state.count` 为组件的计算属性 `count`
   }
   

2. mapGetters：将 Vuex store 中的计算属性（getters）映射为组件的计算属性。

   import { mapGetters } from 'vuex'
   
   // 在组件中使用 mapGetters
   computed: {
     ...mapGetters(['doubleCount'])  // 映射 `getters.doubleCount` 为组件的计算属性 `doubleCount`
   }
   

3. mapActions：将 Vuex store 中的异步操作（actions）映射为组件的方法。

   import { mapActions } from 'vuex'
   
   // 在组件中使用 mapActions
   methods: {
     ...mapActions(['increment'])  // 映射 `actions.increment` 为组件的方法 `increment`
   }
   

4. mapMutations：将 Vuex store 中的同步操作（mutations）映射为组件的方法。

   import { mapMutations } from 'vuex'
   
   // 在组件中使用 mapMutations
   methods: {
     ...mapMutations(['increment'])  // 映射 `mutations.increment` 为组件的方法 `increment`
   }