vuex数据状态管理

安装首先安装依赖
创建store 在store下创建index.js作为仓库主文件

import Vue from 'vue'
import Vuex from 'vuex'
import reservoir from './modules/reservoir'

Vue.use(Vuex)

export default new Vuex.Store({
modules: {
reservoir
}
})

分模块创建在store目录下创建子文件夹modules，作为详细子模块信息在文件中分别创建state、actions、mutations、getters用于管理数据，并进行导出

    const state = {
        reservoir: []
    }
    const actions = {
        updateReservoir:  ({commit}, param) => {
            commit('setReservoir', {items: param})
        } 
    }

    const mutations ={
        setReservoir: (state, {items}) => {
            state.reservoir = items
        }
    }

    const getters = {
        getReservoir: state => state.reservoir
    }

    export default fvg{
        state,
        actions,
        mutations,
        getters
    }

在vue主文件使用最外层的index.js

import store from './store/index.js'
....省略其他代码....
const rootVm = new Vue({
    el: '#app',
    store,  // 重要是这里，其他根据需要加载
    template: '<App/>',
    components: { App },
    router
})

使用在任意组件使用

import { mapGetters, mapActions } from 'vuex';

computed: {
    ...mapGetters({
        reservoirs: 'getReservoir'      // reservoirs 即可作为一个计算属性使用
    })
},
methods: {
    ...mapActions([
        'updateReservoir'   // 需要修改那个数据就加载那个的actions方法
    ])，
    initData () {
        this.updateReservoir(this.reservoirModule)  // 向其他方法一样使用传入数据即可。
    }
}

如有问题或更好的方式请不吝赐教

vue-一个简单的vuex

vuex数据状态管理