vue3中使用vuex实例介绍

在Vue 3中，使用Vuex与Vue 2类似，需要先安装和配置Vuex，然后创建一个store实例，并在Vue应用程序中注册该实例。

下面是一个简单的Vue 3中使用Vuex的示例：

安装和配置

在使用Vuex之前，需要先安装和配置。可以通过npm或yarn安装Vuex，然后在Vue项目的入口文件（如main.js）中引入并注册Vuex。

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

createApp(App).use(store).mount('#app')

创建store实例

在Vuex中，状态管理的核心是store实例。一个store实例就是一个容器，它包含了应用程序中所有的状态，并提供了一些方法用于读取和修改状态。

import { createStore } from 'vuex'

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
})

export default store;

在上面的代码中，我们创建了一个名为store的实例，并定义了它的state、mutations、actions和getters属性。

• state: 状态对象，用于存储所有的应用程序状态。在这个例子中，我们定义了一个名为count的状态。
• mutations: 变更函数，用于修改状态。只能同步执行。在这个例子中，我们定义了一个名为increment的变更函数，用于将count状态加1。
• actions: 异步变更函数，用于提交mutations，可以执行异步操作。在这个例子中，我们定义了一个名为incrementAsync的异步变更函数，用于延迟1秒后提交increment变更函数。
• getters: 获取函数，用于从状态中获取数据。在这个例子中，我们定义了一个名为doubleCount的获取函数，用于获取count状态的两倍。

在组件中使用store

在Vue组件中使用store，需要通过计算属性或方法来读取状态和触发变更。

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

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

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapActions(['increment', 'incrementAsync'])
  }
}
</script>

在Vue 3中，使用mapState、mapGetters和mapActions函数可以更方便地读取状态和触发变更。这些函数会将store中的state、getters和actions映射到组件的计算属性和方法中，使得代码