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];