VUEX基础使用小例

简单实用：首先创建一个 Vuex store仓库，并定义状态state（比如存用户信息userInfo，多次使用的数据）、mutations 和 actions。如下所示：

import Vue from 'vue';  
import Vuex from 'vuex';  

Vue.use(Vuex);  

const store = new Vuex.Store({  
  state: {  
    userInfo: null, // 存储的数据  
  },  
  mutations: {  
    SET_MY_DATA(state, data) {  
      state.userInfo= data; // 更新状态  
    },  
  },  
  actions: {  
    saveData({ commit }, data) {  
      commit('SET_MY_DATA', data); // 提交 mutation 更新状态  
    },  
  },  
});  

export default store;

// index.js

 但是当我们是多个模块使用，比如人员信息，任务信息，设置信息等，可以将状态，mutations、actions 和 getters抽离到模块 modules 当中去。modules 的作用是将 store 分割成多个模块，以便更好地组织和管理状态、mutations、actions 和 getters。使用模块化的方式可以使 大型应用 的状态管理更加清晰和可维护。

1、创建modules 文件夹，把需要管理的模块都写入此文件夹，2创建一个index.js文件暴漏仓库

 

3，通过require.context实现所有模块集体化。我们可以通过 require.context() 函数来创建自己的 context。

此函数有三个参数：要搜索的目录，标记表示是否还搜索其子目录，匹配文件的正则表达式。
webpack 会在构建中解析代码中的 require.context() 。

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import tagsView from './modules/tagsView' //新增

import persist from "@/store/persist";

Vue.use(Vuex)

// 筛选modules 文件夹中所有的以.js 结尾的文件
const modulesFiles = require.context('./modules', false, /\.js$/)

const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')   // 如'./app.js' => 'app'
  const value = modulesFiles(modulePath)  // 打印结果如图
  // 根据文件名 把对应文件暴漏出来的内容如：state、 mutations,actions return出去
  modules[moduleName] = value.default  
  return modules
}, {})

const store = new Vuex.Store({
  modules,
  getters,
  tagsView, //新增
  plugins: [persist.plugin],
})

export default store

// index.js

以任务模块文件举例：在 task.js 中暴漏定义的各个state、mutations、actions等，在获取数据接口的页面通过d

// 任务模块  
const state: {  
    userInfo: null,  
},  
const mutations: {  
    SET_USER_INFO(state, userInfo) {  
      state.userInfo = userInfo;  
    },  
},  
const actions: {  
    fetchUserInfo({ commit },userInfo) {  
      // 假设从 API 获取用户信息  
      commit('SET_USER_INFO', userInfo);  
    },  
},  
 
export default {
  namespaced: true,
  state,
  mutations,
  actions,
}

在组件中存储数据

<template>  
  <div>   
    <button @click="storeData">存储数据</button>  
  </div>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      userInfo: {}, // 组件内部的数据  
    };  
  },  
  methods: {  
    storeData() { 
      // ./task/fetchUserInfo  task:模块名 fetchUserInfo：action 定义的方法名
      this.$store.dispatch('./task/fetchUserInfo', this.userInfo); // 调用 action 存储数据  
    },  
  },  
};  
</script>

3. 访问存储的数据（有多种方式）

<template>  
  <div>  
    <p>存储的数据: {{ this.$store.state.userInfo.name}}</p>  
  </div>  
</template>  

export default {  
  create(){
     // 获取数据
     this.$store.dispatch("task/fetchUserInfo");
     // 传递值 获取结果
     this.$store
        .dispatch("task/fetchUserInfo", this.taskInfo.taskId)
        .then((res) => {
          this.evolveValue = res;
        });
  }
}; 
<script>   
</script>