学习Vuex记录
vuex解决的问题
组件之间的传值需要通过父组件进行传递。要引入vuex使得所有组件都可以获取值
页面代码
//helloworld
<template>
<div id="app">
<Tab :curIdx="curIdx"
@changeTab="changeTab"></Tab>
<Page :curIdx="curIdx"></Page>
</div>
</template>
<script>
import Tab from '../components/views/pro/tab'
import Page from '../components/views//pro/page'
export default{
name:"HelloWorld",
components:{
Tab:Tab,
Page:Page
},
data(){
return{
curIdx:0
}
},
methods:{
changeTab(index){
// console.log(index)
this.curIdx=index
}
}
}
</script>
<style scoped>
</style>
tab组件代码
//tab.vue
<template>
<div>
<a :class="[{current:curIdx===0}]" @click="changeTab(0)">选项1</a>
<a :class="[{current:curIdx===1}]" @click="changeTab(1)">选项2</a>
<a :class="[{current:curIdx===2}]" @click="changeTab(2)">选项3</a>
<a :class="[{current:curIdx===3}]" @click="changeTab(3)">选项4</a>
</div>
</template>
<script>
export default{
name:'Tab',
props:{
curIdx:Number
},
methods:{
changeTab(index){
// console.log(index)
this.$emit('changeTab',index);
}
}
}
</script>
<style scoped>
a{
margin-right:10px ;
}
.current{
text-decoration: none;
color: red;
}
</style>
插入链接与图片
效果图: 点击选项高亮,显示相应页面。
当然,我们为了让用户更加便捷,我们增加了图片拖拽功能。
page组件页面
<template>
<div>
{{content[curIdx]}}
</div>
</template>
<script>
export default{
name:"page",
props:{
curIdx:Number,
},
data(){
return {
content:[
"页面1",
"页面2",
"页面3",
"页面4"
]
}
}
}
</script>
<style scoped>
</style>
简单使用vuex
页面代码
<template>
<div id="app">
<Tab ></Tab>
<Page ></Page>
</div>
</template>
<script>
import Tab from '../components/views/pro/tab'
import Page from '../components/views//pro/page'
export default{
name:"HelloWorld",
components:{
Tab:Tab,
Page:Page
},
}
</script>
<style scoped>
</style>
tab页代码
<template>
<div>
<a :class="[{current:curIdx===0}]" @click="setCurIdx(0)">选项1</a>
<a :class="[{current:curIdx===1}]" @click="setCurIdx(1)">选项2</a>
<a :class="[{current:curIdx===2}]" @click="setCurIdx(2)">选项3</a>
<a :class="[{current:curIdx===3}]" @click="setCurIdx(3)">选项4</a>
</div>
</template>
<script>
import {mapState,mapMutations} from 'vuex';
export default{
name:'Tab',
computed:{
...mapState(['curIdx'])
},
methods:{
...mapMutations(['setCurIdx'])
}
}
</script>
<style scoped>
a{
margin-right:10px ;
}
.current{
text-decoration: none;
color: red;
}
</style>
改良tab组件代码
<template>
<div>
<a :class="[{current:curIdx===0}]" @click="changeTab(0)">选项1</a>
<a :class="[{current:curIdx===1}]" @click="changeTab(1)">选项2</a>
<a :class="[{current:curIdx===2}]" @click="changeTab(2)">选项3</a>
<a :class="[{current:curIdx===3}]" @click="changeTab(3)">选项4</a>
</div>
</template>
<script>
import {mapState,mapMutations} from 'vuex';
export default{
name:'Tab',
computed:{
...mapState(['curIdx'])
},
methods:{
// ...mapMutations(['setCurIdx'])
changeTab(index){
this.$store.commit('setCurIdx',index)
}
}
}
</script>
<style scoped>
a{
margin-right:10px ;
}
.current{
text-decoration: none;
color: red;
}
</style>
page页代码
<template>
<div>
{{content[curIdx]}}
</div>
</template>
<script>
import {mapState} from 'vuex'
export default{
name:"page",
computed:{
...mapState(['curIdx'])
},
data(){
return {
content:[
"页面1",
"页面2",
"页面3",
"页面4"
]
}
}
}
</script>
<style scoped>
</style>
store代码
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
const store=new Vuex.Store({
state:{
curIdx:0
},
mutations:{
setCurIdx(state,index){
state.curIdx=index;
}
}
})
export default store
想传入多个参数
tab组件代码
<template>
<div>
<a :class="[{current:curIdx===0}]" @click="changeTab(0,'选项1')">选项1</a>
<a :class="[{current:curIdx===1}]" @click="changeTab(1,'选项2')">选项2</a>
<a :class="[{current:curIdx===2}]" @click="changeTab(2,'选项3')">选项3</a>
<a :class="[{current:curIdx===3}]" @click="changeTab(3,'选项4')">选项4</a>
</div>
</template>
<script>
import {mapState,mapMutations} from 'vuex';
export default{
name:'Tab',
computed:{
...mapState(['curIdx'])
},
methods:{
// ...mapMutations(['setCurIdx'])
changeTab(index,text){
this.$store.commit('setCurIdx',{
index,
text
})
}
}
}
</script>
<style scoped>
a{
margin-right:10px ;
}
.current{
text-decoration: none;
color: red;
}
</style>
store代码
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
const store=new Vuex.Store({
state:{
curIdx:0
},
mutations:{
setCurIdx(state,payload){
const {index,text} =payload;
state.curIdx=index;
console.log(text)
}
}
})
export default store
getters使用
页面代码
<template>
<div id="app">
<Part1 />
</div>
</template>
<script>
import Part1 from '../components/views/pro/part1'
export default{
name:"HelloWorld",
components:{
Part1
},
}
</script>
<style scoped>
</style>
组件代码
<template>
<h1>{{myInfo}}</h1>
</template>
<script>
export default {
name:'MyPart',
data(){
return {
myInfo:'无'
}
},
mounted(){
this.myInfo=this.$store.getters.getMyInfo;
}
}
</script>
<style scoped>
</style>
store代码
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
const store=new Vuex.Store({
state:{
curIdx:0,
name:"CDownPace",
age:12
},
mutations:{
setCurIdx(state,payload){
const {index,text} =payload;
state.curIdx=index;
console.log(text)
}
},
getters:{
getMyInfo(state){
return `我的名字是${state.name},今年${state.age}岁`
}
}
})
export default store
效果图
actions使用
页面代码
<template>
<div id="app">
1111
<Part2 />
</div>
</template>
<script>
import Part2 from '../components/views/pro/part2'
export default{
name:"HelloWorld",
components:{
Part2
},
}
</script>
<style scoped>
</style>
组件代码
<template>
<div>1111</div>
</template>
<script>
export default{
name:"Mypart2",
mounted(){
this.$store.dispatch('getData')
}
}
</script>
<style scoped>
</style>
store代码
import axios from "axios";
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
const store=new Vuex.Store({
state:{
curIdx:0,
name:"CDownPace",
age:12,
data:[]
},
mutations:{
setCurIdx(state,payload){
const {index,text} =payload;
state.curIdx=index;
console.log(text)
},
setData(state,data){
state.data=data;
}
},
getters:{
getMyInfo(state){
return `我的名字是${state.name},今年${state.age}岁`
}
},
actions:{
getData(ctx,payload){
// this.$axios.get("https://elm.cangdu.org/v1/cities",{
// params:{type:'hot'}
// })
axios(
`https://elm.cangdu.org/v1/cities?type=group`
)
.then(({data})=>{
// console.log(data)
ctx.commit('setData',data[0])
})
}
}
})
export default store