vuex自动获取当前的时间

效果做成这样，我们要用vuex来自动获取当天的时间 然后添加到界面中去

我们首先来讲讲vuex（在我看来vuex就是为了解决组件传值之间的问题，我们把这些公共的资源，集中放在一个地方来管理）

vuex有五个属性，我们这里来介绍其中四个属性

state就是用来存放数据的

getter就说对state的数据做一次变化，有点像计算属性

mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

　　 回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数（就是修改state数据用的）

action：异步获取数据，然后再使用nutation，把数据放到state上

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutation'
import actions from './action'
import getters from './getter'

const state= {
    newdata: new Date(),10 }
Vue.use(Vuex)

//2.创建Store对象 
const store = new Vuex.Store({
    
    state,
    mutations,
    actions,
    getters
 
 })
 //3.挂载Vue实例上
 export default store

首先建立newdata来保存值

然后在mutation中

export default {
   addcount(state, payload) {
        state.newdata = payload
     }
}

这里就是给newdata重新赋值

在action中

export default{
    /**
     * @desc 异步获取时间 // 只能在这里写异步的ajax请求
     * @param {*} context // 第一个参数为实例对象
     * @param {*} param // 调用该方法传进来的参数 (比如请求分页就会传页码之类的参数)
     */
    getDate(context, param) {
        console.log('param:', param)
        let  _this;
        let mon;
        let day;
        let yy = new Date().getFullYear();
        let mm = new Date().getMonth() + 1;
        let dd = new Date().getDate();
        if(mm >= 10) {
            mon=mm
          }else {
            mon= "0" + mm 
          }
          if(dd >= 10) {
           day = dd;
          }else {
            day = "0" + dd;
          }
       _this= yy + "-" + mon + "-" + day;
        // 获取要改变state用的mutation方法名‘addcount’（是个字符串）
      context.commit('addcount', _this)
    },
    
}

这里就是获取当前时间，然后再通过调用mutation中的函数，将当前日期赋值到newdata中

export default {
   cartList(state) {
       let aa = "00:00:00"
       return state.newdata + " " + aa
   },
}

在getter中获取newdata中的值，并对它进行一点修饰

然后就是在我们的项目里面使用vuex

首先我们需要引入

  import {mapGetters, /*mapState,*/ mapActions} from 'vuex'

然后

computed: {
           ...mapGetters({
             newdate:'cartList'
           }),
            // ...mapState({
            //   cc: state => state
            // })
           },
  onLoad() {
    // 执行vuex里面 action的方法 getDate函数
    this.getDate( )
  },
  methods: {
    ...mapActions(['getDate'])
  },

最后渲染到界面

{{newdata}}