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: '<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>