vuex的简单使用

1.store->index.js

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


Vue.use(Vuex)

const store = new Vuex.Store({
  state:{
    curInx:0,
  },
  mutations:{
    //提供更改curInx的方法setCurInx
    //第一个参数就是state，第二个参数是要更改的数据
    setCurInx(state,index){
      console.log(index)
      state.curInx = index
    }
  }
})


export default store

2.tab->index.vue

<template>
    <div>
        <a href="javascript:;"
        :class="[{current: curInx == 0}]" @click="setCurInx(0)"
        >选项1</a>
        <a href="javascript:;"
        :class="[{current: curInx == 1}]" @click="setCurInx(1)"
        >选项2</a>
        <a href="javascript:;"
        :class="[{current: curInx == 2}]" @click="setCurInx(2)"
        >选项3</a>
        <a href="javascript:;"
        :class="[{current: curInx == 3}]" @click="setCurInx(3)"
        >选项4</a>
    </div>
   
</template>
  
<script>
  import {mapState,mapMutations} from 'vuex';
  export default {
    name: 'Tab',
    computed:{
        //mapState取出要用的值
        //mapMutations获取使用的方法
          ...mapState(['curInx'])
        //...mapState({
        //    curInx:(state)=> state.tab.curInx
        //})
    },
    methods:{
       ...mapMutations(['setCurInx'])
    }

  }
</script>
  
<style scoped>
  a{
    margin-right: 10px;
    color: aqua;
  }
  .current{
    color: #000;
    text-decoration: none;
  }
</style>
  

page->index.vue

<template>
 <div>{{content[curInx]}}</div>
</template>
<script>
import {mapState} from 'vuex';
 export default{
    name: 'Page',
    computed:{
          ...mapState(['curInx'])
        //...mapState({
        //    curInx:(state)=> state.tab.curInx
        //})
    },
    data(){
        return{
            content:[
                '页面1',
                '页面2',
                '页面3',
                '页面4',
            ]
        }
    }
 }
</script>
<style scoped>
</style>