vue之间的传值问题---2.vuex

通过 Vuex 进行状态管理：

是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

在Vuex中传递对象时，应该注意不直接传递对象的引用，

1). 安装Vuex npm install vuex --save

2).然后在src目录下创建store目录，建立一个adress.js文件

// Vuex 配置
const store = new Vuex.Store({
// 在store中定义一个包含对象的状态：
  state: {
    value: '',



  },
//创建一个mutation来更新该状态：
  mutations: {
    setValue(state, value) {
      state.value = value;
    },
  },
});

// 源页面
<template>
  <div>
    <input v-model="value" />
    <button @click="setValue">传递参数</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
    };
  },
  methods: {
    setValue() {
      this.$store.commit('setValue', this.value);
    },
  },
};
</script>

// index.js 在store文件下的
Vue.use(Vuex)
export default new Vuex.Store({
//在store中定义一个包含对象的状态
  state: {
    adress: ''
  },
//创建一个action来触发该mutation：
  actions: {
    setAdress (ctx,adress) {
      ctx.commit('setAdress',adress)
    }
  },
//创建一个mutation来更新该状态：
  mutations: {
    setAdress (state,adress) {
      state.adress = adress
    }
  }
})

// .在main.js中引入store
import store from './store'

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')


//.赋值地址
this.$store.dispatch('setAdress','这里是参数，选中后的地址')
直接通过dispatch触发adress.js中actions中的setAdress方法并将新值传递过去.

//接受参数
console.log('接受到的参数：'+this.$store.state.adress)
这样就能让两个页面之间进行数据传递.


//方法

在组件中使用mapState将状态映射到组件的计算属性中：
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['adress'])
  }
}

在组件中使用mapActions将action映射到组件的方法中：

import { mapActions } from 'vuex';

export default {
  methods: {
    ...mapActions(['setAdress'])
  }
}

在组件中使用this.$store.state.adress访问对象的值，或者使用this.setAdress(payload)来更新对象的值。

例子：


import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    address:'',
    loginInfo:{},
  },
  mutations: {
    setAddress(state,address) {
      state.address = address;
    },
    setLoginInfo(state,loginInfo){
      console.log('11111111111', loginInfo)
      state.loginInfo = loginInfo
      state.loginInfo = JSON.stringify(loginInfo)
      localStorage.setItem('loginInfo',state.loginInfo)
      console.log('11111111111',state.loginInfo)
    }
  },
  actions: {
    // setAddress({commit},address) {
    //   commit('setAddress',address)
    // }
    setAddress(ctx,address) {
      ctx.commit('setAddress',address)
    },
    setLoginInfo(ctx,loginInfo) {
      ctx.commit('setLoginInfo',loginInfo) 
    }
  },
  modules: {
  }
})


  console.log(this.$route.params)
        const methodObject = {
            method: '方法',
            otherData: 'some data'
        };
        this.$store.dispatch('setAddress', '这里是参数，选中后的地址')
        this.$store.dispatch('setLoginInfo', methodObject)
        console.log('接受到的参数：' + this.$store.state.address)
        console.log('接受到的参数1111：' + JSON.parse(this.$store.state.loginInfo).method)