vue3中stroe的使用

Vue3中的store使用与Vue2有一些不同。在Vue3中，我们可以使用新的`createStore`函数来创建store，并且可以利用`provide`和`inject`方法在组件之间进行store的共享。

首先，我们需要安装Vue3的状态管理库`@vue/reactivity`和`@vue/runtime-core`。然后，我们可以使用`createStore`函数创建一个store实例。

import { createStore } from 'vue'

const store = createStore({
  state() {
    return {
      count: 0
    }
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

在上述代码中，我们定义了一个`state`对象，一个`mutations`对象和一个`actions`对象。`state`对象中存储了应用中的状态，`mutations`对象中定义了更改状态的方法，`actions`对象中定义了一些异步操作。

接下来，我们需要在Vue的根组件中使用`provide`方法将store实例提供给所有的子组件。可以使用`app.provide`或者`app.config.globalProperties.$store`进行共享。

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

const app = createApp(App)
app.provide('store', store)
// 或者使用
// app.config.globalProperties.$store = store

app.mount('#app')

在子组件中，我们可以使用`inject`方法来获取store实例。

import { inject } from 'vue'

export default {
  name: 'ChildComponent',
  setup() {
    const store = inject('store')

    // 访问state中的属性
    console.log(store.state.count)

    // 调用mutations中的方法
    store.commit('increment')

    return {
      store
    }
  }
}

在以上代码中，我们使用`inject`方法获取了在根组件中共享的store实例。通过调用store的`commit`方法，我们可以调用mutations对象中的方法来对状态进行更改。

总之，Vue3中的store使用与Vue2有一些不同，需要使用`createStore`函数来创建store实例，并通过`provide`和`inject`方法在组件之间进行store的共享。