vuex如何在组件中修改状态

vuex在module中定义了state和mutaition,
请问一下大家,我如何在组件中修改这个state.
因为这个state获取的是返回的日期,在组件中我希望用moment插件,this.$moment("这个日期")来进行格式化,在显示在页面中,看了很就文档,当时还是没明白改怎么修改呀?

下面是module是的代码:

import axios from 'axios'
axios.defaults.baseURL = 'xxxxxxx';

const state = {
  title:"",
  authorName:"",
  pubNews:"",
  channelNews:"",
  createAt:"",
  content:""
};
const mutations = {
  GETDETAILS(state,res){
    state.title=res.data.news.title;
    state.authorName=res.data.news.authorName;
    state.pubNews=res.data.news.pubNews;
    state.channelNews=res.data.news.channelNews;
    state.createAt=res.data.news.createAt;
    state.content=res.data.news.content;
  }
};

const actions = {
  getDetails({commit},id){
    axios.get("/news/detail",{withCredentials:true,params:{id:id}}).then(res=>{
      commit("GETDETAILS",res)
    })
  }
};
export default{
  state,
  mutations,
  actions
}

createAt是那个创建日期,我想要在组件中格式化这个日期

阅读 5.4k
3 个回答

你的意思是在vuex在module还是用原来的日期格式,在具体的组件页面中显示时才转化成moment的格式,是这个意思吗?
如果是这个意思,你可以在组件页面中添加一个转换时间格式的方法,在调用state. createAt时调用

<template>
    <div>{{changeTimeFormat()}}</div>
</template>
<script>
  import { mapGetters, mapActions } from 'vuex'
  var moment = require('moment')
  export default {
    computed: {
      ...mapGetters({
        createAt: 'createAt'
      })
    },
    methods: {
      changeTimeFormat () {
        var newTime = moment(this.createAt)
        return newTime
      }
    }
  }

如果你每个地方都要转换格式的话,还不如直接在vuex在module中直接把时间格式转换过来,方便省事

2楼的可以,还可以写一个createAt的action
getcreatTime({commit},param){
commit('createAt',param)
}
在组件中调用的时候
computed: {

  ...mapGetters({
    createAt: 'createAt'
  })
},

mounted(){
this.$store.dipatch('getcreatTime', moment(this.createAt))

}

actions就是组件中的commputed方法,其实组件中可以直接执行mutations中的GETDETAILS方法

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