VUE利用vuex模拟实现新闻点赞功能实例

下面我将详细讲解“VUE利用vuex模拟实现新闻点赞功能实例”的完整攻略。

一、安装vuex

Vuex是Vue.js中的一个专为Vue.js应用程序开发的状态管理模式，它集中式存储管理所有组件的状态。

使用npm安装vuex:

npm install vuex --save

二、Vuex状态管理

在vuex中，store是Vuex数据管理的核心。一个Vuex的store就是一个状态树，它包含着应用中的大部分状态（state）。在页面中使用Vuex数据管理，前先要在store中设置状态数据。下面示例代码展示了如何通过Vuex管理和控制点赞的数目：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    },
    decrement({ commit }) {
      commit('decrement')
    }
  },
  getters: {
    count: function (state) {
      return state.count
    }
  }
})

export default store

在上述代码中，我们使用Vuex管理点赞的数目数据。state中定义了点赞数量；mutations中定义了对点赞数量进行修改的方法；actions中定义了需要对mutations发起的请求；getters中定义了获取修改后点赞数量的方式。

三、在组件中使用

我们可以在需要的组件中引入store，并使用 vuex mapState 工具函数将它的 state 中的count变量映射到计算属性当中，以便方便地使用它。

<template>
    <div>
        <p>点赞数：{{count}}</p>
        <div @click="handleClick()">点赞</div>
    </div>
</template>

<script>
import store from "@/store"
import { mapState } from 'vuex'

export default {
    name: "News",
    computed: mapState({
        count: state => state.count
    }),
    methods: {
        handleClick(){
            // 登录后可点赞
            // TODO
            console.log("点击了点赞")
            this.$store.dispatch('increment')
        }
    },
}
</script>

在上述代码中，我们通过Vuex管理和控制点赞的数目，在computed中使用mapState将其与计算属性count映射；当点击“点赞”时，就可以发起对mutations的请求，更新state中存储的数量。

四、总结

通过上述攻略介绍，我们可以在VUE中实现通过Vuex模拟实现新闻点赞功能，几个主要步骤如下：

1. 安装vuex
2. Vuex状态管理
3. 在组件中使用

希望本攻略能帮助你学会使用vuex管理Vue应用程序的状态。