使用状态管理vuex存取数据。

本篇博客先介绍使用方法，再介绍集成环境。

使用：

 

图①

如图①，Auxiliary页面想要获取index页面的数据。

在store目录的modules目录下新建layout.js文件。

layout.js代码如下：

// 状态管理： 存储用户在 布局页面中 选择的 树结构数据;


// state可以类比vue实例中的data(){return{}}
const state = {
    treeData: []
}


// mutations可以类比vue实例中的methods:{}
const mutations = { // 修改setters里面的内容
    // 同步
    set_tree_data(state, treeData) { // 提供
        // console.warn('state treeData', treeData)
        state.treeData = treeData
    },
    clear_tree_data(state) { // 清理
        state.treeData = []
    }
}

// 与mutations类似;
const actions = {
    // 异步, 从服务器请求回来的数据
    fetchTreeData({commit}, payload) {
        // 假设这是从服务器获取数据的异步操作
        // 这里使用 Promise 作为示例
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                const data = payload; // 假设数据已经从服务器获取到了
                commit('set_tree_data', data);
                resolve(['1','2']);
            }, 1000);
        })
    }
}


const getters = {
    // 定义一个 getter 来过滤 id 等于 1 的树形数据返回
    filterTreeData(state) {
      return state.treeData.filter(item => item.id === 1);
    }
}


export default {
    namespaced: true, //为当前模块开启命名空间 (命名空间 layout)
    state,
    mutations,
    actions,
    getters
}

index页面存储数据到状态管理：

import { mapMutations } from 'vuex'
methods: {

    // 使用辅助函数获取 mutation
    ...mapMutations('layout',['set_tree_data','clear_tree_data']),

    setVuexData() {
      // 调用 set_tree_data方法 存储数据到layout.js文件
      this.set_tree_data(this.staticTreeData); 
    },
},
data(){
    return{
        staticTreeData:
          [{
            id: 1,
            label: '一级 1',
            children: [{
              id: 4,
              label: '二级 1-1',
            }]
          },
          {
            id: 2,
            label: '一级 2',
            children: [{
                id: 5,
                label: '二级 2-1'
            }, {
                id: 6,
                label: '二级 2-2'
            }]
        }],
    }
},
mounted:{
    this.setVuexData()
}

Auxiliary页面从状态管理获取数据：

import { mapState } from 'vuex'

  computed: {
    // 使用辅助函数获取 state
    ...mapState('layout',{
      treeData: state => state.treeData
    }),

    // 使用辅助函数获取 getters
    ...mapGetters('layout',['filterTreeData']),

    // 使用辅助函数获取 actions
    ...mapActions('layout',['fetchTreeData']),
  },

  methods: {
    // 获取存储在状态管理的treeData;
    getVuexStateData(){
        let stateData = this.treeData;
        console.log('stateData: ', stateData);
    },
    getVuexGettersData(){
        let gettersData = this.filterTreeData
        console.log('gettersData: ', gettersData);
    },
    getVuexActionsData(){
        let actionsData = this.fetchTreeData
        console.log('actionsData: ', actionsData);
    }
    
  },

  mounted: {
    this.getVuexStateData()
    this.getVuexGettersData()
    this.getVuexActionsData()
  }  

如此，便介绍完使用方法。

补充getters：

在 Vuex 中，getters 类似于 Vue.js 组件中的计算属性（computed properties），但它们是在 Vuex store 的级别上定义的。getters 允许你基于 store 的状态派生出一些新的状态，这些状态通常是 store 中状态的复杂组合或经过某些处理后的结果。

getters是为了方便使用，与计算属性computed类似。随着modules下面的组件的值变化。

下面介绍集成环境：

环境集成vuex：

整体目录如图①所示。

如下图②在store目录下新建index.js文件：

图②

其中特别的，如本例中的layout组件位于modules目录下，不用再行注册。

如本例中的getters不在modules目录下，是需要注册的。

store目录下的index.js文件如下：

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)


const modulesFiles = require.context('./modules', true, /\.js$/)
// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})


const store = new Vuex.Store({
  modules, // 包含了modules目录下的所有文件;
  getters

})

export default store

main.js是程序的入口，需要在里面注册：

import Vue from 'vue'
import store from './store'

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})