-
潇湘雨夜独听琴2020-01-01 00:00
- 42
- 0
1.两个相同的功能，同样的方法，一个有效，一个无效
2.无效的代码：
<Row :gutter="10" style="margin-top: 10px" v-for="(col, index) in categoryList" :key="index">
<Col span="4" v-for="(item, index) in col" :key="index">
<category-info :info="item"></category-info>
</Col>
</Row>mounted() {
this.getCategoryList()
},
computed: {
categoryList() {
let list = _.chunk(this.$store.state.category.categoryList, 6)
return list
},
categoryTotal() {
return this.$store.state.category.categoryTotal
}
},
methods: {
getCategoryList() {
this.$store.dispatch('getCategoryList')
}
}3.categoryInfo
props: {
info: Object,
},4.store
const category = {
state: {
categoryList: [],
categoryTotal: 0,
},
mutations: {
GETCATEGORYLIST (state, data) {
state.categoryTotal = data.data.length
let categoryList = data.data
state.categoryList = categoryList
},
DELETECATEGORY (state, typeId) {
state.categoryTotal--
state.categoryList = _.remove(state.categoryList, v => {
return v.typeId != typeId
})
}
},
actions: {
// category
getCategoryList (context) {
Util.ajax
.get('/type/all')
.then(res => {
context.commit("GETCATEGORYLIST",res.data)
})
},
deleteCategory (context, typeId) {
Util.ajax
.delete(`/type/delete?typeIds=${typeId}`)
.then(res => {
if(res.data.status == 0) {
context.commit("DELETECATEGORY", typeId)
}
})
},
}
}
export default category刷新页面->mounted->重新获取数据，这个时候 store 是有数据的变化的，但是页面是空白
同样的方式另外一个产品列表就是有效的，很奇怪，是因为computed的对象是数组的原因吗？还是写法上有什么问题
- 共 0 条
- 全部回答
-
三年如梦 普通会员 1楼
Vuex和computed是Vue.js中两种重要的数据管理和计算方式。在使用它们时，需要注意以下几点以确保它们的正确使用：
- 使用 computed 函数进行计算：在计算属性中，使用
computed函数可以轻松地处理计算后的数据。例如，如果你有一个数组对象，你可以使用computed函数来根据指定的条件过滤数据：
javascript export default { data() { return { items: [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }, ], filteredItems: computed(function() { return this.items.filter(item => item.id === 1); }) }; } };- 使用 Vuex 提供的 store：Vuex 提供了一个 store 来管理组件的数据。通过使用 Vuex，你可以在一个全局的地方处理组件的数据，而不需要在每个组件中手动计算和更新数据。例如：
```javascript import Vue from 'vue'; import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({ state: { items: [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }, ], filteredItems: computed(function() { return this.items.filter(item => item.id === 1); }) }, mutations: { updateItems(state, items) { state.items = items; }, }, actions: { updateItems({ commit }) { commit('updateItems', items); }, }, }); ```
- 注意缓存和同步：如果你的计算结果在存储中，那么你需要确保这些结果在其他组件中也是有效的。例如，如果你的计算结果是实时更新的，那么你应该使用 Vuex 的 store 来同步数据，而不是在每个组件中手动更新数据。同时，你也需要注意缓存的问题，因为如果你的计算结果在长时间内没有更新，那么其他组件可能无法正确地使用这些数据。
总的来说，Vuex 和 computed 是 Vue.js 中非常有用的工具，但它们的效果可能取决于你的具体需求和使用场景。在使用它们时，你应该充分考虑这些因素，并根据你的具体情况做出最佳选择。
- 使用 computed 函数进行计算：在计算属性中，使用
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部