每次使用 vue.js 2 的通知时，如何在文本跨度中添加总 + 1？

Question

我的 vue 组件是这样的：

<template>
    ...
        <span v-if="total > 0" class="badge" id="total">{{ total }}</span>
    ...
</template>
<script>
    import { mapGetters } from 'vuex'
    export default {
        mounted() {
            this.initialMount()
        },
        computed: {
            ...mapGetters(['total'])
        },
        methods: {
            initialMount() {
                Echo.private('App.User.' + window.Laravel.authUser.id).notification((notification) => {
                     const a = $('#total').text()
                     const b= parseInt(a) + 1
                     $('#total').text(b)
                })
            },
        }
    }
</script>

我的模块是这样的：

import { set } from 'vue'
import notification from '../../api/notification'
import * as types from '../mutation-types'

const state = {
    total: 0,
}

const getters = {
    total: state => state.total
}

const actions = {
    getNotificationList ({ commit,state })
    {
        notification.getList(
            data => {
                const notifications = data
                commit(types.GET_NOTIFICATION,{ notifications });
            },
            errors => {
                console.log(errors)
            }
        )
    }
}

const mutations = {
    [types.GET_NOTIFICATION] (state, { notifications }) {
        state.total = notifications.length
    }
}

export default {
    state,
    getters,
    actions,
    mutations
}

================================================ =====================

我要每条通知，通知号加1

我上面的代码有效，但它仍然使用 jquery

我想用 vue.js 改变它

我该怎么做？

Answer 1

您必须在 Echo 的成功回调中提交操作，但首先您必须定义突变：

const mutations = {
    [types.GET_NOTIFICATION] (state, { notifications }) {
        state.total = notifications.length
    },
    inc (state) {
      state.total++
    }
}

然后，您可以提交操作

methods: {
    initialMount() {
        Echo.private('App.User.' + window.Laravel.authUser.id).notification((notification) => {
          // Make sure you have imported store
          store.commit('inc')
        })
    },
}