效果做成這樣，我們要用vuex來自動獲取當天的時間 然後新增到介面中去

我們首先來講講vuex（在我看來vuex就是為了解決元件傳值之間的問題，我們把這些公共的資源，集中放在一個地方來管理）

vuex有五個屬性，我們這裡來介紹其中四個屬性

state就是用來存放資料的

getter就說對state的資料做一次變化，有點像計算屬性

mutation：提交更新資料的方法，必須是同步的(如果需要非同步使用action)。每個 mutation 都有一個字串的 事件型別 (type) 和 一個 回撥函式 (handler)。

　　 回撥函式就是我們實際進行狀態更改的地方，並且它會接受 state 作為第一個引數，提交載荷作為第二個引數（就是修改state資料用的）

action：非同步獲取資料，然後再使用nutation，把資料放到state上

 1 import Vue from 'vue'
 2 import Vuex from 'vuex'
 3 import mutations from './mutation'
 4 import actions from './action'
 5 import getters from './getter'
 6 
 7 const state= {
 8     newdata: new Date(),10 }
11 Vue.use(Vuex)
12 
13 //2.建立Store物件 
14 const store = new
 
 Vuex.Store({
15     
16     state,
17     mutations,
18     actions,
19     getters
20  
21  })
22  //3.掛載Vue例項上
23  export default store

首先建立newdata來儲存值

然後在mutation中

1 export default {
2    addcount(state, payload) {
3         state.newdata = payload
4      }
5 }

這裡就是給newdata重新賦值

在action中

 1 export default
 
{
 2     /**
 3      * @desc 非同步獲取時間 // 只能在這裡寫非同步的ajax請求
 4      * @param {*} context // 第一個引數為例項物件
 5      * @param {*} param // 呼叫該方法傳進來的引數 (比如請求分頁就會傳頁碼之類的引數)
 6      */
 7     getDate(context, param) {
 8         console.log('param:', param)
 9         let  _this;
10         let mon;
11         let day;
12         let yy = new Date().getFullYear();
13         let mm = new Date().getMonth() + 1;
14         let dd = new Date().getDate();
15         if(mm >= 10) {
16             mon=mm
17           }else {
18             mon= "0" + mm 
19           }
20           if(dd >= 10) {
21            day = dd;
22           }else {
23             day = "0" + dd;
24           }
25        _this= yy + "-" + mon + "-" + day;
26         // 獲取要改變state用的mutation方法名‘addcount’（是個字串）
27       context.commit('addcount', _this)
28     },
29     
30 }

這裡就是獲取當前時間，然後再通過呼叫mutation中的函式，將當前日期賦值到newdata中

1 export default {
2    cartList(state) {
3        let aa = "00:00:00"
4        return state.newdata + " " + aa
5    },
6 }

在getter中獲取newdata中的值，並對它進行一點修飾

然後就是在我們的專案裡面使用vuex

首先我們需要引入

 1 computed: {
 2            ...mapGetters({
 3              newdate:'cartList'
 4            }),
 5             // ...mapState({
 6             //   cc: state => state
 7             // })
 8            },
 9   onLoad() {
10     // 執行vuex裡面 action的方法 getDate函式
11     this.getDate( )
12   },
13   methods: {
14     ...mapActions(['getDate'])
15   },

最後渲染到介面

{{newdata}}