vue3vuex实列

以下是一个使用Vue 3和Vuex的示例：

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

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

// store/index.js
import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      count: 0
    }
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    }
  },
  actions: {
    async incrementAsync({ commit }) {
      // 模拟异步操作
      await new Promise(resolve => setTimeout(resolve, 1000))
      commit('increment')
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})

export default store

<!-- App.vue -->
<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
  name: 'App',
  setup() {
    const store = useStore()
    const count = computed(() => store.state.count)
    const doubleCount = computed(() => store.getters.doubleCount)

    const increment = () => {
      store.commit('increment')
    }

    const decrement = () => {
      store.commit('decrement')
    }

    const incrementAsync = () => {
      store.dispatch('incrementAsync')
    }

    return {
      count,
      doubleCount,
      increment,
      decrement,
      incrementAsync
    }
  }
}
</script>

在这个示例中，我们创建了一个简单的Vuex store，其中包含一个状态count和一些mutations、actions和getters来操作和计算这个状态。然后，我们在Vue应用中使用createApp函数创建了一个实例，并通过app.use(store)来使用Vuex store。最后，我们在App.vue组件中使用useStore函数来获取store的实例，并使用computed函数来计算状态的值和方法。这样，我们就可以在模板中使用这些计算属性和方法来更新和展示状态了