Vue的store

Vue的store是一个全局状态管理器，可以用来管理应用程序的状态。它提供了一个集中式的存储，可以在应用程序的任何组件中访问和修改状态。

使用Vue的store需要先安装Vuex插件，然后在Vue实例中引入Vuex并创建一个store对象。在store对象中定义state、mutations、actions、getters等属性和方法，用来管理应用程序的状态。

属性	说明
state	store中存储的状态数据，可以通过this.$store.state来访问。
mutations	用于修改state中的数据，只能进行同步操作，可以通过this.$store.commit来调用。
actions	用于处理异步操作，可以通过this.$store.dispatch来调用，可以在actions中调用mutations来修改state中的数据。
getter	用于对state中的数据进行计算或筛选，可以通过this.$store.getters来访问。

下面是一个简单的示例：

1. 安装Vuex插件

npm install vuex --save

2. 在Vue实例中引入Vuex并创建一个store对象

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    getCount: state => state.count
  }
})

export default store

3. 在组件中使用store

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'getCount'
    ]),
    count () {
      return this.getCount
    }
  },
  methods: {
    ...mapActions([
      'incrementAsync'
    ]),
    increment () {
      this.$store.commit('increment')
    }
  }
}
</script>

在上面的示例中，我们定义了一个名为count的状态，并在mutations中定义了一个名为increment的方法来修改count的值。在actions中定义了一个名为incrementAsync的异步方法来延迟1秒后调用increment方法。在getters中定义了一个名为getCount的计算属性来获取count的值。

在组件中，我们使用mapGetters和mapActions来映射getters和actions到组件的计算属性和方法中。在increment方法中，我们使用$store.commit来调用increment方法来修改count的值。

• mapGetters：用于将Vuex中的getter映射到组件的计算属性中。
• mapActions：用于将Vuex中的action映射到组件的methods中。
• mapState：用于将Vuex中的state映射到组件的计算属性中。
• mapMutations：用于将Vuex中的mutation映射到组件的methods中。

总之，使用Vue的store可以方便地管理应用程序的状态，提高代码的可维护性和可读性。