vue组件间传值分为以下几种:
1.父子组件传值
2.兄弟组件传值
3.跨多层级组件传值
4.任意组件传值
想起这些实在有些繁琐,于是刚开始开发就走了捷径,选择了vuex进行页面间传值:
1. 搭建vue脚手架,安装vuex依赖
2. 项目目录src下新建store目录和store.js文件
通常store对象都包含4个属性:state,getters,actions,mutations。
state (类似存储全局变量的数据)
getters (提供用来获取state数据的方法)
actions (提供跟后台接口打交道的方法,并调用mutations提供的方法)
mutations (提供存储设置state数据的方法)
3.在mian.js中导入store.
import store from './store'
Vue.prototype.$store = store
//在app绑定组件时绑定store
const app = new Vue({
store,
...App
})
4.组件使用:
A.把vuex引入。
import {
mapState,
mapMutations
} from 'vuex'
//写入对应方法
mapState(['forcedLogin', 'token', 'id', 'mcid', 'cid']),
...mapMutations(['login',