vue中vuex的使用

vuex是使用vue中必不可少的一部分，基于父子、兄弟组件，我们传值可能会很方便，但是如果是没有关联的组件之间要使用同一组数据，就显得很无能为力，那么vuex就很好的解决了我们这种问题，它相当于一个公共仓库，保存着所有组件都能共用的数据。

适合初学者使用，保存数据以及获取数据

1. 在store文件夹中，新建index.js 文件

import Vue from "vue"
import Vuex from "vuex"
 
Vue.use(Vuex);
 
export default new Vuex.Store({
    state:{   //用来保存数据
        pathName: "",
        currDbSource: {},
        currJobData: {},
        DbSource: []
    },
    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'

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3. 保存数据

methods:{
    click(){
        // 点击按钮进行一些操作，然后保存数据
        this.$store.commit('saveCurrDbSource',this.db)
    }
}

4. 获取变量：（当数据初始获取不到时，可以使用计算属性用来获取）

this.$store.state.变量名
 
// 例如
this.store.state.currDbSource

这样其他组件就可以共用这个保存起来的数据了，也能进行相应的修改