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;
}
},
以下来自某位大佬的教导@独木林空
这里需要注意几点:
1、事实上,获取你可以直接通过计算属性获取 state 的变量,也可以通过 getters 获取(类似计算属性),这两种都是官方推荐的,论场景分的话,如果你获取的值不需要转化,那么你可以直接从 state 中拿,如果你获取的指需要经过一定的转化才能在组件中使用,你可以加上getters,在不破坏 state 的值的情况下转换值并获取。
2、设置值必须是一个方法,就是 actions,你可以理解他为一个专门调用 mutation 为 state 设置值的函数集合(对应的是 methods),actions里面是写逻辑的,可以直接获取 state,可以写业务逻辑,可以触发多个 mutation,但你不应该在 actions 里直接改变 state 的值。
3、mutation 是专门用于修改 state 值的函数,与 getters 对应,你可以在此进行一些设置值时的转换,但你不应该在这里写业务逻辑,例如增删改查,或是在此触发某些 actions 函数,这些应该在 actions 做。
以上内容你均可以不遵守,都有办法直接改 state,但是你遵循这些规则,就是规范一些,相当于将维护步骤规范化了