模块 getters 不在 vue 组件中更新
module getters not updating in vue component
我没有单独使用 getters.js 文件,取而代之的是在 js->assets->store->modules->user.js file
中编写 getter
这是我的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组件-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中,
警报(state.list.length)
在警告框中给出正确的计数。
但是在user.vue,
警报(这个。$store.getters['user/userCount'])
给出 'undefined'
从中删除不必要的:
:
const getters = {
userCount (state) => state.list.length
};
在 Api 控制器中,我使用的是 paginate() 而不是 get()。vue 开发工具帮助我发现了这一点...
getList: ({commit,state}) => {
axios.get('/api/user/list')
.then((response) => {
commit('LIST', response.data);
})
}
已将 response.data 更改为 response.data.data
我没有单独使用 getters.js 文件,取而代之的是在 js->assets->store->modules->user.js file
中编写 getter这是我的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组件-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中, 警报(state.list.length) 在警告框中给出正确的计数。
但是在user.vue, 警报(这个。$store.getters['user/userCount']) 给出 'undefined'
从中删除不必要的:
:
const getters = {
userCount (state) => state.list.length
};
在 Api 控制器中,我使用的是 paginate() 而不是 get()。vue 开发工具帮助我发现了这一点...
getList: ({commit,state}) => {
axios.get('/api/user/list')
.then((response) => {
commit('LIST', response.data);
})
}
已将 response.data 更改为 response.data.data