vuex实现点赞功能?

ywqs
  • 31

在项目中用vuex实现点赞功能的时候出现了许多bug怎么想也想不到
有一个资讯列表 点击某条资讯进去详情页会有一个is_liked来判断是否点赞,如果is_liked=1表示点赞按钮变红,is_liked=0未点赞按钮为灰色
这是资讯详情的接口
clipboard.png
这是点赞的接口

clipboard.png
我刚进去资讯详情就先把is_liked存到vuex里面了
getinfos() {

    var id=this.$route.query.id;
    this.$http.get(`/api/api/news/newsdetail?source=pc&news_id=${id}&net_work=3`)
      .then(function (res) {
          this.info=res.body.data
        this.$store.dispatch('setLiked', res.body.data.is_liked);
        })
 然后去判断是否点赞
  isdz(){
    if (this.$store.state.isliked==0) {
        $('.buts').addClass('')
    } else{
        $('.buts').addClass('changes')
    }
  },

没有点赞去点赞,点赞了取消点赞
dianzan() {

    $('.buts').toggleClass('changes')
    $('.zan-span').show(30).delay(300).hide(30);
    if (this.$store.state.isliked==0) {
        var id=this.$route.query.id;
    var token=sessionStorage.getItem("userToken")
    this.$http.get(`/api/api/user/likerecord?source=pc&res_id=${id}&res_name=news&token=${token}`)
    .then(function(res){
        this.$store.dispatch('setLiked', 1);
    })
    .catch(function(error){
        console.log(error)
    })
    } else if(this.$store.state.isliked==1){
    var id=this.$route.query.id;
    var token=sessionStorage.getItem("userToken")
    this.$http.get(`/api/api/user/likerecord?source=pc&res_id=${id}&res_name=news&token=${token}`)
    .then(function(res){
        this.$store.dispatch('setLiked', 0);
    })
    .catch(function(error){
        console.log(error)
    })
    }
  },
  现在的问题就是要么点击一个全部都点赞了  要么是点击一个is_liked=0的页面全部的点赞都被取消掉
  
  这是store.js的代码
  
  import Vue from 'vue'

import Vuex from 'vuex'
import vuexAlong from 'vuex-along'
import * as getters from './getters'
import * as mutations from './mutations'
import * as actions from './actions'
Vue.use(Vuex)

// 集中状态

var store= new Vuex.Store({

state:{
    userInfo: null, //用户信息
    isLogin:false,  //用户是否登录
    token:'',
    isliked:0
},
mutations,
getters,
actions,
plugins: [vuexAlong]

})
export default store
这是mutations里面的
export const userStatus=(state,user)=>{

if (user) {
    state.userInfo=user
    state.isLogin=true
}else if(user==null){
    sessionStorage.setItem("nickname",null);
    sessionStorage.setItem("userToken","");
    sessionStorage.setItem("id","");
    state.userInfo=null;
    state.isLogin=false;
    state.token='';
}

}
export const liked=(state,payload)=>{

state.isliked=payload

}
这是actions的
export const setUser=({commit},user)=>{

commit("userStatus",user)

}
export const setLiked=({commit},payload)=>{

commit("liked",payload)

}
这是getters的
export const userInfo=state=>state.userInfo
export const isLogin=state=>state.isLogin
export const isliked=state=>state.isliked

也不知道是哪的问题

回复
阅读 6k
3 个回答

isdz(){

if (this.$store.state.isliked==0) {
    $('.buts').addClass('')
} else{
    $('.buts').addClass('changes')
}

什么鬼玩意,用了vue,但却用jquery控制view?还是说你用了vuex却没用vue?

点击一个全部都变了,我估计是因为你绑定了同一个变量

isdz()方法,感觉有点不对劲。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏