vuex里面的store架構

將store文件夾分為四個文件夾，分別是actions，getters,mutations,state。

action:和mutatation功能是類似的，都是修改state里面的數據，區別是action用於異步修改

getter：后端傳過來的數據，如果需要做一些處理就在getter里面寫。

mutations：用於處理同步數據修改

state：存放后端傳過來的原生數據。

父組件通過調用action對store里面數據進行了處理，他的子組件只要調用getter就可以獲取到父組件處理后的數據

如下是文件結構：

這里我們演示一個小栗子：

state.js

export default{
　　count: 0,
　　firstName: 'zha',
　　lastName: 'lu'
}

getter.js:拼接兩個字符串

// 和computer一樣，都是對后台返回的數據做處理，只是這個可以應用多個頁面

export default {
　　fullName (state) {
　　const name = state.firstName + state.lastName
　　return name
　　}
}

mutations.js 執行函數updateCount

// 所有數據的修改都盡量放在mutations，將mutation寫成一個對象,它同步操作，不能有異步的代碼在里面

export default{
　　// 只能有兩個參數
　　updateCount (state, num) {
　　state.count = num
　　}
}

actions.js 每隔一段時間提交updateCount

// 和mutations差不多，區別是是action可以存放異步的代碼

export default {
    updateCountAsync (store, data) {
    setTimeout(() => (
    store.commit('updateCount', data.num)
    ), data.time)
    }
}

store.js:上面幾個都需要在這里進行注冊

import Vuex from 'vuex'
import defaultState from './state/state.js'
import mutations from './mutations/mutations'
import getters from './getters/getters.js'
import actions from './actions/actions.js'
// 通過函數，返回一個store
export default () => {
    return new Vuex.Store({
        state: defaultState,
        mutations,
        getters,
        actions
    })
}

App.vue

<template>
　　<div id="app">
　　<img src="./assets/logo.png">
　　<router-link to="/second">second</router-link>
　　<router-view/>
{{counter}} {{fullName}}
</div>
</template>

<script>
import {
　　mapState,
　　mapGetters,
　　mapMutations,
　　mapActions
} from 'vuex'
export default {
　　name: 'App',
　　mounted () {
　　console.log(this.$store)
　　// let i = 1
　　// actions異步處理,未使用mapActions
　　// this.$store.dispatch('updateCountAsync', {
　　// num: 5,
　　// time: 2000
　　// })
　　// 使用mapActions,在調用方法的時候不用傳方法名
this.updateCountAsync(
{
　　num: 5,
　　time: 2000
})
// mutations同步處理，每隔一秒進行count+1
// setInterval(() => {
// this.$store.commit('updateCount', i++)
// }, 1000)
},
computed: {
/* count () {
return this.$store.state.count
},和下面的mapState功能一致 ...要使用命令
npm i babel-preset-stage-1
*/
...mapState({
　　// counter: 'count'和下面一樣，只是這個是傳對象，下面是傳方法
　　counter: (state) => state.count
}),
...mapGetters(['fullName'])
// 和上面一樣fullName () {
// return this.$store.getters.fullName
// }
},
methods: {
　　...mapActions(['updateCountAsync']),
　　...mapMutations(['updateCount'])
　　}
}
</script>

<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>