将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'// 通过函数，返回一个storeexport default () => {    return new Vuex.Store({        state: defaultState,        mutations,        getters,        actions    })}

App.vue