（21）VUEX使用笔记-1

store文件夹下创建index.js

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

Vue.use(Vuex);
const store = new Vuex.Store({
  state: {
    fileData: {},
    studentId: '', 
  },
  getters: {
    getFileData(state) {
      return state.fileData
    },
    getStudentId(state) {
      return state.studentId
    },
  },
  actions: {
    setFileData({ commit, state }, uploadFile) {
      commit("setFile", uploadFile);
    },
    setStudentId({ commit, state }, student_id) {
      commit("setSID", student_id);
    },
  },
  mutations: {
    setFile(state, uploadFile) {
      state.fileData = uploadFile
    },
    setSID(state, student_id) {
      state.studentId = student_id
    }
  }
})

export default store;

在组件中设置值

this.$store.dispatch('setFileData', this.form)

在组件中获取值

    computed: {
        fileData() {
            return this.$store.getters.getFileData;
        }
    },

以下来自某位大佬的教导@独木林空

QQ图片20201016100543.png

这里需要注意几点：

1、事实上，获取你可以直接通过计算属性获取 state 的变量，也可以通过 getters 获取（类似计算属性），这两种都是官方推荐的，论场景分的话，如果你获取的值不需要转化，那么你可以直接从 state 中拿，如果你获取的指需要经过一定的转化才能在组件中使用，你可以加上getters，在不破坏 state 的值的情况下转换值并获取。

2、设置值必须是一个方法，就是 actions，你可以理解他为一个专门调用 mutation 为 state 设置值的函数集合（对应的是 methods），actions里面是写逻辑的，可以直接获取 state，可以写业务逻辑，可以触发多个 mutation，但你不应该在 actions 里直接改变 state 的值。

3、mutation 是专门用于修改 state 值的函数，与 getters 对应，你可以在此进行一些设置值时的转换，但你不应该在这里写业务逻辑，例如增删改查，或是在此触发某些 actions 函数，这些应该在 actions 做。

以上内容你均可以不遵守，都有办法直接改 state，但是你遵循这些规则，就是规范一些，相当于将维护步骤规范化了

image.png