when vuex is used in the project to implement the like function, many bug have no idea that
there is an information list that clicks a piece of information into the details page and there will be an is_liked to determine whether to like or not. If is_liked=1 indicates that the like button turns red, the is_liked=0 unlike button is grayed out
this is the interface for information details
. As soon as I entered the information details, I saved is_liked in 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")
}
}, No likes to like, likes cancel
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)
/ / centralized status
var store= new Vuex.Store ({
)state:{
userInfo: null, //
isLogin:false, //
token:"",
isliked:0
},
mutations,
getters,
actions,
plugins: [vuexAlong]})
export default store
this is
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}
this is actions"s
export const setUser= ({commit}, user) = > {
commit("userStatus",user)}
export const setLiked= ({commit}, payload) = > {
commit("liked",payload)}
this is getters"s
export const userInfo=state= > state.userInfo
export const isLogin=state= > state.isLogin
export const isliked=state= > state.isliked
I don"t know where the problem is