这个需求vuex能实现吗

Question

这个时间提问,的确有点煞风景 先祝各位七夕快乐吧

下面进入正题

我是vue新人,虽然时间长,但总是断断续续,也没多深入(惭愧,主要悟性差).最近看了慕课网上的高仿饿了么视频,边看,边把它改成vue2,当然这是简单的.但是有个东西,我是想引入vuex来实现的

这是demo链接描述

这是demo打开就能看到的

这是点击食物的详情页

我想说的我是能不能用vuex来管理同一种食物的加号减号的状态,但是各个食物间又是互相独立,互不干涉的呢.我看了很长时间vuex的文档,发现modules的模块重用好像有那么点意思

但是好像又说不过去

不知道我的思路对不对

以下是我的vuex代码

mutations.js

const state = {
    totalPrice: 0
}

const myModule = {
    state() {
        return {
            count: 0
        }
    },
    actions: {
        ADDCART({
            state,
            commit,
            rootState
        }, price) {
            commit('ADDCART', price)
        },
        DECREASECART({
            state,
            commit,
            rootState
        }, price) {
            commit('DECREASECART', price)
        }
    },
    mutations: {
        ADDCART({
            state,
            rootState
        }, price) {
            state.count++
                rootState.totalPrice += price
        },
        DECREASECART({
            state,
            rootState
        }, price) {
            state.count--
                rootState.totalPrice -= price
        }
    },
    getters: {
        count(state, getters, rootState) {
            return state.count
        }
    }
}

const getters = {
    count: state => state.totalPrice
}

export default {
    // mutations,
    state,
    myModule,
    getters
}

index.js

import mutations from './mutations.js'

Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        mutations
    }
})

另外我想问一下,modules里面的action怎么触发啊,我触发不了

这是加号,减号组件里面的代码

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
    props: {
        food: {
            type: Object
        }
    },
    computed: {
        ...mapGetters(['count'])
    },
    methods: {
        ...mapActions(['some/nested/module/mutations']),
        addCart($event) {
            if (!$event._constructed) {
                return
            }
            this.$store.dispatch('ADDCART', this.food.price)
        },
        decreaseCart($event) {
            if (!$event._constructed) {
                return
            }
            this.$store.dispatch('DECREASECART', this.food.price)
        }
    }
}
</script>

能看到这里,不管有没有解答,我都感谢各位,再次祝各位节日快乐,单身的早点找到另一半

Answer 1

1.可以把列表数据存进vuex的state，结构比如像这样：
[{'id':'1', 'title':'皮蛋瘦肉粥', 'count':'1', 'price':'10', ...}, {'id':'2', 'title':'皮蛋瘦肉粥2', 'count':'0', 'price':'15', ...}]

进入detail页面的时候，可以根据id，取出相应的obj，然后操作count

2.ADDCART 和 DECREASECART 操作的是另一个state里面的数组。这样就不用写module了。

Answer 2