vuex如何在组件中修改状态

Question

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是那个创建日期，我想要在组件中格式化这个日期

Answer 1

你的意思是在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中直接把时间格式转换过来，方便省事

Answer 2

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

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

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

}

Answer 3

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