一.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中的数据,数据变更后响应推送给组件,组件重新渲染
————————————————