Vuex页面跳转时数据传递

1.Vuex概念

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

这个状态自管理应用包含以下几个部分：

• state，驱动应用的数据源；
• view，以声明方式将 state 映射到视图；
• actions，响应在 view 上的用户输入导致的状态变化。

以下是一个表示“单向数据流”理念的极简示意：

Vuex基本思想

1. action 提交mutation,而不是直接更改状态

2.action 可以包括异步操作，mutation只能同步

3.modules  将store分割成模块（modules）,每个模块拥有自己的(state,mutations,actions,getter);方便维护

4.store 改变状态时通过 （commit） mutations

2. 引入vuex

npm install vuex --save

 

3.在src/store文件下下创建一个store.js

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

export default new Vuex.Store({
   
    state: {
        count: 0,
        apiDocInfo: {
            operationId: ""
        }
    },
    mutations: {
        //设置apiInfo的值
        setApiInfo(state, apiInfo) {
            state.apiDocInfo = apiInfo
        },
        increment: state => state.count++,
        decrement: state => state.count--,
    }
})

 

3.在 main.js中添加

//Vuex
import store from './store/store'  // 引入store 对象


new Vue({
  el: '#app',
  store,// 注入到根实例中
  router,
  components: {
    App
  },
  template: ''
})

 

4.SetValue

   queryApiInfo(){
      let apiDocInfo={
        operationId:operationId
      };
     //直接设置
      // this.$store.state.apiDocInfo=apiDocInfo;
      //commit设置
      this.$store.commit('setApiInfo', apiDocInfo);// SET_ORDER为order值的设置方法的方法名

    },    

5.获取值

 

 

转载于:https://www.cnblogs.com/feng123/p/9505404.html