记录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