vue页面（兄弟组件）之间传值

最近重温了《射雕英雄传》，郭靖学习了降龙十八掌、九阴真经等一身绝世武功，却不懂得如何运用，他也说一直自己蠢，真是蠢啊。

今天面试，面试官问我页面A跳转到B怎么传值，我想了半天没想到，后面他提示用vuex。。。啊，我真是蠢啊

归根结底，都是实战经验太少。

对于单页面应用，页面传值就是组件之间传值

那么，组件之间是如何通过vuex传值呢？

比如，现在尝试从一个文章列表跳转到文章编辑页面，中间把文章数据传到文章编辑页面

先创建一个store，定义一个mutations，当触发时将currentArticle设置为传入的article

store.js

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

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
    currentArticle: null
  },
  mutations: {
    editArticle: (state, article) => {
      state.currentArticle = article;
    }
  }
});

在main.js中引入store

new Vue({
  ...
  store: store
});

在文章列表页面中，点击文章实现跳转，并执行store.commit修改store的状态

BlogList.vue

在编辑文章页面中，通过computed函数获得

AddBlog.vue

或者写成

computed: mapState({
      blog: state => state.currentArticle
      // 下面两种写法也可以
      // blog: 'currentArticle'
      // blog() {
      //   return this.$store.state.currentArticle
      // }
    })

效果如图，开发者工具已经可以看到state已经接收到了article

 

 参考资料：

https://vuex.vuejs.org/zh/guide/state.html

https://vuex.vuejs.org/zh/guide/mutations.html