vuex 使用方法

一.vuex简介 

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

在项目中使用vuex会让我们优化功能,更加的游刃有余,也会提高代码的创作乐趣,那么就让我带着大家来看看vue项目中该怎么使用它

二.适合初学者使用,保存数据以及获取数据

1.在store文件夹,新建个index.js文件(文件夹的命名可以任意取,如果没有这个文件夹,可以新建一个,当然也可以不建文件夹,直接新建一个index.js文件也是可以的,不影响使用)

在新建的js文件中写入如下代码

import Vue from "vue" 
import Vuex from "vuex" 
Vue.use(Vuex)

export default new Vuex.Store({
   state:{
     pathName:"",
     currDbSource: {},
     currJobDate: {},
     DbSource:[]
   },
   mutations:{
     //保存当前菜单栏的路径
     savePath(state,parhName){
       state.pathName = pathName;
     },
     //保存当前点击的数据源
     saveCurrDbsource(state,currDbSource){
       state.currDbSource = currDbSource;
     },
     //保存当前点击的元数据
    savecurrJobDate(state,currJobDate){
      state.currJobDate = currJobDate
    },
    //保存所有数据源
    saveDbSource(state, DbSource){
       state.DbSource =  DbSource
    }
   }
})

这里解释一下上面各个代码的作用,state是自定义的一些变量,需要来保存数据,mutation是用来触发事件,相当于方法,用户需要通过触发这个方法,借此来保存数据,参数的话,第二个参数就是用户传入的值,然后在方法中赋值给state中的变量

2.main.引入:(注意路径即可)

//引入vuex -store
import store from './store/index.js'

new Vue({
 el: '#app',
router,
store,
render:h => h(App)
});

3.保存数据:(场景举例:当我们点击按钮后,我们需要把当前的数据保存到vue中 ,然后跳转到别的路由,然后使用这些数据)

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

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

4.获取变量:(当数据初始获取不到时,可以使用计算属性用来获取)

this.$store.state.变量名

//例如
this.$store.state.currDbSource

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

二.模块化

当然,上述方法中我们把所有东西都写在一个文件中,这样数据多的时候,看着太臃肿了,也不利于维护,而且mutations也不能解决异步问题,这里就介绍另一种方式以及actions

actions:看过官网介绍的人都知道,这是间接触发mutations方法的一种中间商,而且它可以执行异步操作,避免用户直接操作atate

1.state.js:保存所以数据,以对象的方式导出

export default {
 pathName :'' , //路由
 currDbSource :{},//当前数据源
 currJobData :{},//当前数据源
 DbSource :[],//所以数据源,供元数据界面下拉列表使用
 selectJobMeta:{},//当前选择元数据(搜索后点击的单条数据)
 specialSubject:[].//多条数据
 duplicateJobMeta:{},//复制的数据
};

2.mutations.js:保存所有方法,来改变state的数据

//保存当前菜单栏的路径
export const savePath = (state ,pathName)=> {
  state.pathName = pathName
};

//保存当前点击的数据源
export const saveCurrDbsource = (state ,CurrDbsource)=>{
  state.currDbSource = currDbSource;
}

//保存当前点击的元数据
export const savecurrJobDate = (state ,currJobDate)=>{
  state.currJobDate = null ;
  state.currJobDate = currJobDate
};

//保存所有数据源
export const saveDbSource = (state ,DbSource)=>{
  state.DbSource = DbSource
};

这里有2种方法:

//方法一:
export const saveDbSource = (context,payload) => {
 context.commit('saveDbSource',payload);
};

//方法二:
export const saveDbsource = ( { commit },payload) => {
  commit('saveDbSource' ,payload);
}

第一种是通过 context上下文用来触发事件,一种是直接通过commit,为了保存数据,都需要加第二个参数payload,不然保存到vuex的数据就是空值

4.index.js:引入相应模块,暴露出store,供vue注册后全局使用

5.main.js中引入index.js

6.保存数据

有两种保存数据的方法,第一种就是直接操作方法,通过disptach派发给actions ,让actions去触发

第二种就是通过在methods中添加映射关系,,数组方式,意味着我们可以在数组中写多个方法(这里数组每个方法名是actions.js文件所定义的方法名),然后在需要使用的地方直接this即可,当然,也可以直接绑定给html中的某个事件

值得注意的是,避免和methods中自己定义的其他方法的名字冲突

7.获取数据

通过计算属性,当数据发生改变,我们可以保证拿到的是响应过后的数据,也是数组形式,也意味着我们可以拿到多组数据,这里数组也是state.js中定义的变量

使用的时候，可以直接通过this.变量名拿到，例如本例中的 this.DbSource，我们可以把它赋给我们自定义的变量，也可以直接使用

值的注意的是，避免和data中自己定义的其他变量的名字冲突

至此，我们就完成了vuex的保存以及获取数据，希望对你有所帮助。

当然，我们需要把一vuex中的一组数据过滤，其他组件都共用过滤后的数据，这种情况大家可能会用到getters，这里我就不多赘述了，有兴趣的小伙伴可以自己了解一下。

附上vuex的运行过程，官网的图片：组件派发任务到actions，actions触发mutations中的方法，然后mutations来改变state中的数据，数据变更后响应推送给组件，组件重新渲染

————————————————