vue3 vuex基础使用 案例

好的，这里为您提供一个基于Vue3和Vuex的简单案例：

首先，需要安装Vue3和Vuex：

npm install vue@next vuex@next

然后在`main.js`中引入Vue和Vuex，并创建一个store实例：

import { createApp } from 'vue'
import { createStore } from 'vuex'

import App from './App.vue'

const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

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

在上面的代码中，我们创建了一个store实例，其中包含一个状态属性`count`和一个变更函数`increment`，用于更新`count`的值。

接下来，在组件中使用store中的数据和方法：

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  computed: {
    count () {
      return this.$store.state.count
    }
  },
  methods: {
    increment () {
      this.$store.commit('increment')
    }
  }
}
</script>

在上面的代码中，我们使用`computed`属性来获取store中的`count`属性，并使用`methods`属性来调用store中的`increment`方法。

这样，我们就完成了一个基于Vue3和Vuex的简单案例，可以实现一个计数器的功能。