模块吸气剂未在 vue 组件中更新答案

【问题标题】：module getters not updating in vue component模块吸气剂未在 vue 组件中更新
【发布时间】：2023-03-15 07:56:01
【问题描述】：

我没有单独使用 getters.js 文件，而是将 getters 写在 js->assets->store->modules->user.js 文件中

这是我的 user.js

const state = {
    count : '',
    list:[]
};

const mutations = {
    COUNT: (state, data) => {
        state.count = data
    },
    LIST : (state, data) => {
        state.list = data
    }
};

const getters = {
  userCount:(state) => state.list.length
};

const actions = {
    getList: ({commit,state}) => {
        axios.get('/api/user/list')
        .then((response) => {
            commit('LIST', response.data);
        })
    }
};

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
}

这是我的用户 vue component-user.vue

<template>
    <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-yellow">
            <div class="inner">
                    <h3>{{ usercount }}</h3>
                    <p>User Registrations</p>
            </div>
            <div class="icon">
                <i class="ion ion-person-add"></i>
            </div>
            <a href="#" class="small-box-footer">View <i class="fa fa-arrow-circle-right"></i></a>
        </div>
    </div>
</template>
<script>
export default{
    computed: {
        usercount() {
          return this.$store.getters['user/userCount']; 
        }
    },
    mounted(){
        this.$store.dispatch('user/getList');
    }
}
</script>

在 user.js 中，警报（状态。列表。长度）在警告框中给出正确的计数。

但是在 user.vue 中， alert(this.$store.getters['user/userCount']) 给出'未定义'

【问题讨论】：

标签： laravel-5.3 vuejs2 vuex

【解决方案1】：

从这里删除不必要的:：

const getters = {
  userCount (state) => state.list.length
};

【讨论】：

const getters = { userCount:(state) => state.list.length };这是正确的。之前它显示未定义。但现在一切正常......

【解决方案2】：

在 Api 控制器中，我使用的是 paginate() 而不是 get()。vue 开发工具帮助我找到了这个...

getList: ({commit,state}) => {
    axios.get('/api/user/list')
    .then((response) => {
        commit('LIST', response.data);
    })
}

将 response.data 更改为 response.data.data

【讨论】：