vue3中引入store

在Vue3中引入store，需要使用新的API `createStore`，具体步骤如下：

1. 安装Vuex

npm install vuex@next --save

2. 创建store

在`src`目录下创建一个`store`目录，然后新建一个`index.js`文件，编写如下代码：

import { createStore } from 'vuex'

const store = createStore({
  state: {},
  mutations: {},
  actions: {},
  getters: {}
})

export default store

在`state`、`mutations`、`actions`、`getters`中分别定义状态、变更状态、异步操作、获取状态的方法。

3. 引入store

在Vue组件中引入store，可以通过`provide`和`inject`实现跨组件传递。

在`main.js`中引入store：

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

createApp(App).provide('store', store).mount('#app')

在组件中通过`inject`获取store：

import { inject } from 'vue'

export default {
  setup() {
    const store = inject('store')
    // ...
  }
}

然后就可以在组件中使用store了。例如：

export default {
  setup() {
    const store = inject('store')
    console.log(store.state.xxx) // 获取状态
    store.commit('xxx') // 修改状态
    store.dispatch('xxx') // 异步操作
    console.log(store.getters.xxx) // 获取计算属性
  }
}