Vuex页面跳转时数据传递

Posted feng123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vuex页面跳转时数据传递相关的知识,希望对你有一定的参考价值。

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>

 


以上是关于Vuex页面跳转时数据传递的主要内容,如果未能解决你的问题,请参考以下文章

如何使PHP程序执行页面跳转时传递大量参数

vue路由跳转时判断用户是否登录功能

P04:路由跳转时用query传递和接受参数

vs2008 中 c#,asp.net 中做网页时,在用menu 控件实现页面跳转时,如何实现参数的传递

应用程序中,页面跳转时,为啥SessionID发生了改变?

Activity跳转时传递Bitmap对象的实现