vue页面中获取vuex数据的写法

在Vue单文件组件中获取Vuex中的数据通常有以下几种写法：

1. **注入store**:
首先，你需要在组件选项中注入store实例，可以使用Vue官方提供的`setup`生命周期钩子或者`inject`属性：

   <script>
   import { ref, onMounted } from 'vue';
   import { store } from '@/store';

   export default {
     setup() {
       const userInfo = ref(null);
       onMounted(() => {
         userInfo.value = store.state.userInfo; // 从state中获取
         // 或者使用store getters
         const getUserInfo = store.getters.getUserInfo;
         userInfo.value = getUserInfo();
       });
       return {
         userInfo
       };
     }
   }
   </script>

2. **计算属性（Computed）**:
可以创建一个计算属性来缓存和处理来自Vuex的数据：

   <template>
     <div>{{ user.name }}</div>
   </template>

   <script>
   computed: {
     user() {
       return store.state.userInfo || {};
     }
   }
   </script>

3. **Action和Mutation** (对于异步数据):
如果数据是从服务器动态获取并存在 Vuex 中，可以通过 `store.dispatch` 发起 action，然后在 mutations 中处理响应。在组件内部，你可以监听这个 action 的完成：

   <template>
     <div v-if="loading">加载中...</div>
     <div v-else>{{ user.name }}</div>
   </template>

   <script>
   setup() {
     const dispatch = useDispatch(); // 或者 import { useDispatch } from 'vuex'

     const fetchUserInfo = async () => {
       await dispatch('fetchUser');
     };

     onMounted(fetchUserInfo);

     // 当 user 状态改变时，自动更新组件
     observe(store.state, (newState, oldState) => {
       if ('userInfo' in newState) {
         console.log(newState.userInfo); // 监听状态变化
       }
     });

     let user;
     Object.defineProperty(this, 'user', {
       get() {
         return user;
       },
       set(newUser) {
         user = newUser;
       }
     });
   }
   </script>

以上就是在Vue页面中获取Vuex数据的一些常见写法。