vue3在store中存数据

在Vue 3中，可以使用Vuex来管理应用程序的状态。Vuex是一个专为Vue.js应用程序开发的状态管理模式。在Vuex中，可以使用store来存储和管理数据。

首先，需要安装Vuex。可以通过npm或者yarn来安装：

npm install vuex

或者

yarn add vuex

接下来，在项目中创建一个store文件夹，并在其中创建一个index.js文件。在index.js文件中，需要导入Vue和Vuex，并创建一个新的store实例。示例代码如下：

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

const store = createStore({
  state() {
    return {
      // 在这里定义你的数据
      count: 0,
      username: ''
    }
  },
  mutations: {
    // 在这里定义修改数据的方法
    increment(state) {
      state.count++
    },
    setUsername(state, username) {
      state.username = username
    }
  },
  actions: {
    // 在这里定义异步操作的方法
    async fetchData({ commit }) {
      // 异步获取数据
      const data = await fetch('https://api.example.com/data')
      const result = await data.json()
      
      // 提交mutation来修改数据
      commit('setUsername', result.username)
    }
  },
  getters: {
    // 在这里定义计算属性
    doubleCount(state) {
      return state.count * 2
    }
  }
})

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

在上面的示例代码中，我们创建了一个包含state、mutations、actions和getters的store实例。state用于存储数据，mutations用于修改数据，actions用于处理异步操作，getters用于计算属性。

在组件中使用store中的数据，可以使用`$store.state`来访问。例如，在模板中可以使用`{{ $store.state.count }}`来显示count的值。

如果需要修改store中的数据，可以使用`$store.commit`来提交一个mutation。例如，在方法中可以使用`this.$store.commit('increment')`来增加count的值。

如果需要在组件中使用计算属性，可以使用`$store.getters`来访问。例如，在模板中可以使用`{{ $store.getters.doubleCount }}`来显示doubleCount的值。