vue3vuex简单实列

Vue3 Vuex 是 Vue.js 的官方状态管理库，用于管理应用程序中的状态。下面是一个简单的 Vue3 Vuex 实例。

首先，安装 Vue3 Vuex：

npm install vuex@next

然后，在 main.js 文件中引入并使用 Vuex：

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++
    },
    decrement(state) {
      state.count--
    }
  }
})

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

在 App.vue 文件中使用 Vuex 状态：

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

<script>
import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()

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

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

    return {
      count: store.state.count,
      increment,
      decrement
    }
  }
}
</script>

在上述代码中，state 函数返回一个包含 count 属性的对象，mutations 对象包含两个方法：increment 和 decrement，用于增加和减少 count 值。

在 App.vue 文件中，通过 useStore 方法获取 store 对象，然后在模板中使用 count 值，并通过按钮的点击事件调用 increment 和 decrement 方法来修改 count 值。

这就是一个简单的 Vue3 Vuex 实例。你可以根据自己的需求来定义和使用 Vuex 的状态和操作方法