如何在uniapp中使用vuex在页面中通过获取用户在登陆时的用户名，对页面数据进行筛选

在uniapp中，为了实现登录时用户名筛选页面数据的功能，你可以按照以下步骤使用Vuex来管理用户的登录状态和数据：

1. **设置Vuex状态**[^2]:
- 在`store`目录下创建一个`state.js`文件，定义一个`user`对象来存储登录状态和用户名：

     export const state = {
       user: {
         name: null,
       },
     };

2. **创建actions**:
- 创建一个`login.js`文件，其中定义一个`login` action来获取用户信息并更新状态：

     import { commit } from '@/store';
     // 假设你有一个axios实例或者uni-app的网络请求API
     async function loginUser(username) {
       try {
         const response = await yourNetworkRequest(username);
         commit('setUserName', response.data.name); // 更新username到store
       } catch (error) {
         console.error('Login failed:', error);
       }
     }
     export default { login };

3. **定义mutations**:
- 在`mutations.js`中添加一个`setUserName` mutation来更新用户名：

     export const mutations = {
       setUserName(state, username) {
         state.user.name = username;
       },
     };

4. **在组件中使用Vuex**:
- 在需要显示用户名筛选功能的组件里（比如`UserList.vue`），通过`mapState`和`mapActions`来访问状态和触发action：

     <template>
       <div v-if="user.name">
         <!-- 使用已登录的用户名进行筛选 -->
         <ul>
           <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
         </ul>
       </div>
     </template>

     <script>
     import { mapState, mapActions } from 'vuex';

     export default {
       computed: {
         ...mapState(['user']), // 获取user对象
         filteredItems() {
           // 根据用户名过滤items数组
           return this.items.filter(item => item.username.includes(this.user.name));
         },
       },
       methods: {
         ...mapActions(['login']),
       },
       created() {
         // 登录成功后自动调用login action
         this.login(this.$route.query.username);
       },
     };
     </script>

现在，每当用户登录成功，`filteredItems`计算属性会根据登录的用户名动态筛选数据。