vue传参，组件之间传参、路由传参、vuex

一、组件之间传参

详见：https://blog.csdn.net/qq_41287423/article/details/84991855

二、路由传参

两种情况：params 和 query
都可以在目标组件的生命周期里，通过 this.$route 进行获取

methods:{
		goTheme(item){
			//点击图片跳转主题界面
			// this.$router.push({path:'/theme/123'})                                           // this.$route.params
			// this.$router.push({name:'theme',params:{hehe:123,age:16}})      // this.$route.params
			// this.$router.push({ path: '/theme/123', query: { plan: 'private' }})
			this.$router.push({name:'theme',params:{themeId:item.themeId,name:item.name}})
		}
	}

例：首页中精选主题的路由传参

<template>
	<div id='home'>
		<Header title='零食商贩' ></Header>
		<Banner class='banner'></Banner>
		<div class='theme_contain'>
			<div class='title'>精选主题</div>
			<div class='box'>
				<div :class="index==2?'big':'small'" 
				     v-for='(item,index) in themes'
				     @click='goTheme(item)'>
					<img :src="item.img" alt="">
				</div>

			</div>
		</div>
		<ProductList class='new_contain' ></ProductList>
	
		<TabBar></TabBar>
	</div>
</template>

<script>
import Banner from  './Banner'
import Header from '../../common/Header'
import TabBar from '@/components/common/TabBar'
import ProductList from 'common/ProductList'
export default{
	name:'Home',
	components:{Banner,Header,TabBar,ProductList},
	data(){
		return {
			themes:[{name:'美味水果世界',img:'/static/1@theme.png',themeId:1},
			{name:'新品首发',img:'/static/2@theme.png',themeId:2},
			{name:'做个干物女',img:'/static/3@theme.png',themeId:3}]
		}
	},
	methods:{
		goTheme(item){
			//点击图片跳转主题界面
			// this.$router.push({path:'/theme/123'})                          // this.$route.params
			// this.$router.push({name:'theme',params:{hehe:123,age:16}})      // this.$route.params
			// this.$router.push({ path: '/theme/123', query: { plan: 'private' }})
			this.$router.push({name:'theme',params:{themeId:item.themeId,name:item.name}})
		}
	}
}
</script>

<style lang="less" scoped>
@import url('../../../style/main.less');
#home{
	.banner{
		.m_t(45);
	}
	.theme_contain{
		.title{
			.fs(18);
			color: @tabSelColor;
			text-align:center;
			.lh(25);
			.h(25);
			padding: 5px 0px;
		}
		.box{
			display: flex;
			flex-wrap: wrap;
			.small{
				width: 50%;
			}
			.big{width: 100%;

			}
			img{
				width: 100%;
			}
		}
	}
	.new_contain{
		.p_b(80);
	
		
	}
}
#test{
	height: 900px;
}	
</style>

三、Vuex：全局状态管理，一改全改，多组件共享状态
安装： npm install vuex
下载失败 : npm cache clean -f // 清理npm缓存

1、简单举例：
a、一般会新建 store 文件夹，在 index.js 初始化 vuex

b、在 main.js 中，引入：


c 、例如，在我的页面修改 name,使用 this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …改内容 ')， {{this,store.state.name}} 在页面显示。（一般不这样使用，变量可以放在computed中处理，见下面较全例。）

2、Vuex较全示例：
假设有 List.vue 和 Shopcar.vue 两个组件，在list里修改两个组件共同渲染的数据，两个界面数据会同时更新

main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false
import store from './store'

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

index.js

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

Vue.use(Vuex)

let store=new Vuex.Store({
// ************   （一）state全局变量
	state:{
       num:1,
       login:false
	},
	//  ***************    （二）mutations只做状态值得修改 不做任何逻辑操作
	mutations:{
              changeNum(state,num){
              state.num=num
              }
	},
	// **************   （三） getters派生属性
	getters:{
              double(state){
                     return state.num*2
              }
	},
	 // **************     （四）actions 异步处理逻辑操作
	actions:{
       getNumByApi({commit},params){
              setTimeout(()=>{
              commit('changeNum',params)
              }, 2000);
              }
	}
})

export default store

List.vue组件 （mapMutations,mapActions）在 methods 里

<template>
  <div class="shopcar">
     我是List
     {{this.$store.state.num}}

    //原始方法：
    //<div @click='emitAction("xixi")'> change</div>

    // **************    辅助函数+ES6方法:
     <div @click='getNumByApi("xixi")'> change</div>

  </div>
</template>
<script>

   // **************    引入辅助函数   **************   
import {mapMutations,mapActions} from 'vuex'

export default {
  name: 'List',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  
    // ******************************************       ** （二）Mutations **     ******************************************  
    
   // **************    方式一：（最原始方法，且只能传一个参数）
  // methods:{
  // 	changeN(){
  // 		console.log(222)
  // 		this.$store.commit('changeNum',6)
  // 	}
  // }
 // **************    方式二：（利用辅助函数 mapMutations，可传多个）
  // methods:mapMutations(['changeNum','fun1','fun2'])
 // **************    方式三：（拓展并改名，将 changeNum改为 test）
  methods:{
  	...mapMutations({
  		test:'changeNum'；
  	}),
  	
   // ******************************************      ** （四）Actions **     ******************************************
   
  // **************    方式一：原始方法:  （使用dispatch触发index.js里actions中的getNumByApi ）
  // emitAction(params){
  //      this.$store.dispatch('getNumByApi',params)
  // }
  // **************    方式二：（辅助函数+ES6方法）
  	...mapActions(['getNumByApi'])；

  }
}
</script>

<style scoped>
  .shopcar div{
  	width: 100px;
  	height: 100px;
  	background: red;
  }
</style>

Shopcar.vue组件（mapState,mapGetters）在 computed 里

<template>
  <div class="shopcar">
     我是shopcar

     <p>this.$store:{{this.$store.state.num}}</p>
     <p>computed ：{{_num}} {{login}}</p>
     <p>getters{{dbs}}</p>

  </div>
</template>

<script>
  // 引入辅助函数
import {mapState,mapGetters} from 'vuex'

export default {
  name: 'Shopcar',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      num:this.$store.state.num
    }
  },
  
   // ******************************************       **（一） State **     ******************************************
   
  // **************    方式一：（将变量放在 computed 里处理）
  // computed:{
  //   num(){
  //     return this.$store.state.num
  //   }
  // }
  // **************     方式二：（当有多个变量时，以数组获取）
  // computed:mapState(['num','login'])
  // **************    方式三：（当有重复命名属性num，可重命名_num，以对象获取）
  // computed:mapState({
  //   _num:'num',        
  //   login:'login'
  // })
 // **************    方式四：（假如当有之前变量test时，可使用 ...mapState 在其后拓展）
  // computed:{
//	test(){
//	   return this.$store.state.test;
//	},
    //  ...mapState({
      // _num:(state)=>{return state.num},  // 同下面写法
     // _num:state => state.num,
     // login:'login'
    //    })
//  }

  // ******************************************       ** （三）Getters **     ******************************************
  // **************************   getters  可通过 $store.getters获取， 也要放在  computed 里     

     // **************    方式一：（将 getters 中的方法也放在 computed 里处理）
    // double(){
    //   return this.$store.getters.double
    // },
	// **************    方式二：（采用辅助函数mapGetters ，调用 getters 中的方法）
    // ...mapGetters(['double']),  
    ...mapGetters({dbs:'double'}),   // 也可重命名

  },
  created(){
    console.log(this.$store);
  }
}
</script>

<style scoped>

</style>