vuex-store文件夹的index.js代码（vue中store文件夹）

1.在store文件夹新建一个index.js的文件

index.js代码如下：

import Vue from "vue"

import Vuex from "vuex"

Vue.use(Vuex);

export default new Vuex.Store({

state:{ //state是自定义的一些变量，需要用来保存数据，

pathName: "",

currDbSource: {},

currJobData: {},

DbSource: []

},

mutationss是用来触发事件，相当于方法，用户需要通过触发这个方法借此来保存数据，参数的话，第二个参数就是用户传过来的值，然后在方法中赋值给state中的变量。

mutations:{

// 保存当前菜单栏的路径

savePath(state,pathName){

state.pathName = pathName;

},

// 保存当前点击的数据源

saveCurrDbSource(state,currDbSource){

state.currDbSource = currDbSource;

},

// 保存当前点击的元数据

saveCurrJobData(state,currJobData){

state.currJobData = currJobData;

},

// 保存所有数据源

saveDbSource(state,DbSource){

state.DbSource = DbSource;

}

}

})

2.main.js引用：

// 引入vuex-store

import store from './store/index';

new Vue({

el: '#app',

router,

store,

render: h => h(App)

});

3.保存数据：

methods:{

click(){

// 点击按钮进行一些操作，然后保存数据

this.$store.commit('saveCurrDbSource',this.db)

//这里的第一个参数是要触发的方法，也就是上面mutations中的方法，第二个参数是你要传递的数据

}

}

4.获取变量：

this.$store.state.变量名

// 例如

this.$store.state.userId

//同步操作

this.$store.commit('方法名',值)[储存]

this.$store.state.方法名[取值]

//异步操作

this.$store.dispatch('方法名',值)[存储]

this.$store.getters.方法名[取值]

#前端# #vue# #编程# #学习编程# #新人涨粉求支持#

?