Vue

Vuex

安裝Vuex

1
2
3
npm install vuex@next --save
yarn add vuex@next --save

main.js引入vuex

1
2
3
4
5
6
7
8
9
import Vuex from 'vuex'
Vue.use(Vuex)

export const app = new Vue({
        el: '#app',
        store,      
        components: { App },
        template: '<App/>'
})

新增store/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
 state: {
    //如同data
    msg: 'Vuex',
 } ,
 actions: {
//呼叫mutations處理分同步，第一個參數：context,第二個參數：payload
 }
 mutations: {
    如同methods，只有mutations才能操作state資料狀態
    第一個參數：state,第二個參數：payload
 },
 getters: {
 //狀態延伸
 }
})

單一狀態樹,頁面調用msg

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>

<script>
import { app } from '../main'
import Vue from 'vue'
import { mapState } from 'vuex'
export default {

    computed: {
        ...mapState({
        msg: state => state.msg
        })
    }
}
</script>

modules模組概念
新增store/modules/values.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import axios from "axios"

export default {
   // actions, mutations, getters 是屬於區域變數
   namespaced: true, 
   state: {

   },
   actions: {
       getDayObjects(context) {
           const api = `${process.env.APIPATH}/api/Teacher/LoadTeacherOpenClass`;
           axios.post(api, raw, {
                   headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'Authorization': `Bearer ${process.env.TOKEN}` }
               })
               .then((res) => {
                    if (res.data.IsSuccess) {
                       context.commit('DAYOBJECTS', res.data.DayObjects);
                    }
               })
               .catch((error) => {
                   console.log(error);
               })
       }
   },
   mutations: {
       DAYOBJECTS(state, payload) {
           state.DayObjects = payload;
       },
   }
   getters: {
       DayObjects: state => state.DayObjects, 
   }
}

新增store/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import dayobjectsModules from './modules/dayobjects'
import modalModules from './modules/modal'
export default new Vuex.Store({
 state: {
    //如同data
    msg: 'Vuex',
 } ,
 actions: {
//呼叫mutations處理分同步，第一個參數：context,第二個參數：payload
 }
 mutations: {
    如同methods，只有mutations才能操作state資料狀態
    第一個參數：state,第二個參數：payload
 },
 getters: {
 //狀態延伸
 },
  modules: {   
    dayobjectsModules,  
},
})

單一狀態樹,頁面調用msg

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>

<script>
import { app } from '../main'
import Vue from 'vue'
import { mapState,mapActions,mapGetters } from 'vuex'
export default {
created(){
     this.getDayObjects();
},
 methods: {
       ...mapActions('dayobjectsModules', ['getDayObjects']),
 },
    computed: {
        ...mapState({
        msg: state => state.msg
        }),  
        ...mapGetters('dayobjectsModules', ['DayObjects']),
    }
}
</script>