Vue3.0 中如何在一个组件内部使用vuex store

在Vue 3.x中，要在组件内部使用Vuex store，你需要按照以下步骤操作：

1. **导入store实例**：
首先，在组件文件中通过`import`从你的 Vuex store 的入口文件中导入Store实例。例如：

   import { store } from '@/store/index.js';

或者如果你使用的是模块化结构，可能会是这样的：

   import store from '@/store/moduleName.js';

2. **注入store到组件选项中**：
使用Vue的`provide/inject`特性将store注入到组件选项中，让所有子组件能够访问它。在`setup()`钩子里这样做：

   setup() {
     inject('store', store); // 使用inject提供store
   }

然后在组件模板或计算属性中使用`this.$store`来访问store。

3. **在组件内使用store方法和状态**：
现在你可以像操作本地数据一样操作Vuex的状态了：

   const state = computed(() => this.$store.state.myState);
   const dispatch = () => this.$store.dispatch('myAction');

调用`dispatch`来触发action，修改状态。

4. **注意响应式**：
因为Vuex的状态已经是响应式的，所以在组件内部处理store里的状态变化时，不需要额外手动watch。

**相关问题--:**
1. 在非setup模式下如何使用store？
2. vuex store中的mutations和actions有何区别？
3. 如何防止Vue组件直接修改store状态？