Vuex页面跳转时数据传递

Posted 2021-01-02 feng123

1.Vuex概念

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

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

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

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

Vuex基本思想

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: ‘<App/>‘
})

 

4.SetValue

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

    },    

5.获取值

 

<template>
    <div >
           <span>{{count}}</span>
           <span>{{apiDocInfo}}</span>
 
    </div>
</template>
<script>
import {mapState} from ‘vuex‘;
export default {
 
  computed:mapState({
     count:state => state.count,
     apiDocInfo :state => state.apiDocInfo,
  }),
}
</script>