vue3store使用

Vue 3中的状态管理有一个新的特性叫做Vue 3 Composition API。您可以使用Composition API来创建和管理您的Vue 3应用程序中的状态。下面是一个简单的示例，演示了如何在Vue 3中使用Composition API来创建和使用一个简单的store：

首先，您需要创建一个新的JavaScript文件（例如store.js），并在其中导入Vue和createStore函数：

import { reactive, readonly } from 'vue';

// 创建一个可变的状态对象
const state = reactive({
  count: 0,
});

// 创建一个修改状态的方法
function increment() {
  state.count++;
}

// 导出一个只读的状态对象和修改状态的方法
export const store = readonly({
  state,
  increment,
});

然后，在您的Vue组件中导入并使用store：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { store } from './store.js';

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

在上面的示例中，我们创建了一个可变的状态对象`state`，并将其包装在`reactive`函数中以实现响应式。然后，我们创建了一个`increment`方法来修改状态对象中的`count`属性。最后，我们通过`readonly`函数将状态对象和修改方法包装在一个只读的store对象中进行导出。

在Vue组件中，我们可以使用computed属性来获取状态对象中的属性值，并在方法中调用store对象中的修改方法来更新状态。这样，我们就可以在Vue 3应用程序中使用Composition API来创建和使用一个简单的store了。

请注意，上述示例只是一个简单的演示，您可以根据您的实际需求扩展和修改store对象和组件。希望对您有帮助！