vuex状态管理

vue-cli开发中,多个组件间通信可以采用vuex状态管理,使多个实例共享一份数据

1.安装vuex

npm install vuex --save-dev

2.创建vuex

1.action.js文件

import Vuex from 'vuex'  //引入vuex

Vue.use(Vuex)  //使用vuex

//定义需要分享的数据

var state={

  addUrl:"",

  deleteUrl:""

}

//定于数据的赋值方法

var mutations = {

  updateAddURL(){

    state.addUrl="";

  },

  updateDeleteURL(){

    state.deleteUrl="";

  }

}

//导出

export default new Vuex.Store({

  state,

  mutations

})

2.store.js文件

export const  updatePage = ({commit}) => {

  commit('updateAddURL','updateDeleteURL')

}

3.项目中使用

项目中使用的原理是通知stores.js,让其去调用action.js的更新函数去更新数据

this.$store.commit('updateAddURL');

this.$store.commit('updateDeleteURL');

//给分享数据赋值,相当于全局变量

this.$store.state.addUrl=optionUrl[0];

this.$store.state.deleteUrl=optionUrl[2];

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容