Vuex-基本使用-图集展示

效果展示

vuex基本使用

Vuex是vue的数据管理容器、

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

1. 安装 npm install --save -dev vuex
2. 创建store文件夹，内部创建store.js文件 --------vuex的store就是管理vue的数据仓库
3. store.js 

   export default {
       state: {
           a: 100
       },
       mutations: {
   
       }
   }

    

4. 在main.js中引入这个store文件和vuex，然后进行相关的注册和使用

   import Vue from 'vue'
   // 相对路径引入的App.vue文件
   import App from './App.vue'
   // 引入vuex
   import Vuex from 'vuex'
   // 引入store文件
   import store from './store/store.js'
       // 使用vuex
   Vue.use(Vuex)
   
   Vue.config.productionTip = false
   
   new Vue({
       // 渲染节点
       render: h => h(App),
       // 挂载store文件
       store: new Vuex.Store(store)
   }).$mount('#app')

    

5. 全局使用store文件的状态数据 例：app.vue

   <div>
       {{$store.state.a}}
   </div>

    

 vue的计数器

如果对以上数据$store.state.a 进行修改 则必须通过$store.commit进行修改，不能直接修改参数

比如在App.vue中进行对state的a++

app.vue

export default {
    methods: {
        add() {
            this.$store.commit("add")
        }
    }
}

commit内部的参数是mutations罗列的事件参数

store.js

export default {
    state: {
        a: 100
    },
    mutations: {
        add(state) {
            state.a++
        }
    }
}

add内部的state参数是当前的state对象的内容，所以如果对当前的state进行加1，全局的state也就会随之加1

此时如果想要点击加2则需要

methods: {
    add() {
        this.$store.commit("add", 2)
    }
}

store.js

mutations: {
    add(state, val) {
        state.a += val
    }
}

此时页面可以成功的进行加2的修改，但是如果想传入多个参数，就必须以对象的形式传入

app.vue

add() {
    this.$store.commit("add", {
        a: 2,
        b: 4
    })
}

store.js

mutations: {
    add(state, { a, b }) {
        state.a += a * b
    }
}

图集展示

通过基本使用拓展一个实例   明星图集展示

store.js

export default{
    state:{
        // 当前的图集组
        current:"guanxiaotong",
        // 当前的小图下标
        idx:1
    },
    mutations:{
        //切换图集组
        changeStr(state,{str}){
            state.current = str
        },
        // 切换上一张图片
        prevCurrent(state){
            state.idx--
            if(state.idx < 1) state.idx = 5
        },
        // 切换下一张图片
        nextCurrent(state){
            state.idx++
            if(state.idx > 5) state.idx = 1
        },
        //点击小图切换图片
        ChangeCurrent(state,{idx}){
            state.idx = idx
        }
    }
}

App.vue

<template>
  <div>
    <h1>{{$store.state.a}}</h1>
    <div class="box">
      <Btn></Btn>
      <CurrentImg></CurrentImg>
      <SmallImg></SmallImg>
    </div>
  </div>
</template>

<script>
import Btn from "./components/Btn"
import CurrentImg from "./components/CurrentImg"
import SmallImg from "./components/SmallImg"
export default {
  components:{
    Btn,CurrentImg,SmallImg
  }
}
</script>

<style>
.box{
  width: 800px;
  height: 500px;
  margin: 50px auto;
  box-shadow: 0 0 3px 2px rgba(0, 0, 0, .2);
  padding: 20px;
  border-radius: 10px;
}
</style>

 Current.vue

<template>
    <div>
        <div class="currentImg">
            <div class="changeBtn" @click="prevCurrent()">&lt;</div>
            <img :src="CurrentSrc($store.state.current,$store.state.idx)" alt="">
            <div class="changeBtn" @click="nextCurrent()">&gt;</div>
        </div>
    </div>
</template>

<script>
    export default {
        methods:{
            // 如果直接在img中动态src修改图片地址，得到的是编译之前的图片地址，显示不出图片，所以必须先引入在使用
            CurrentSrc(url,i){
                return require(`../assets/${url}/${i}.jpg`)
            },
            prevCurrent(){
                this.$store.commit("prevCurrent")
            },
            nextCurrent(){
                this.$store.commit("nextCurrent")
            }
        }
    }
</script>

<style scoped>
.currentImg{
    text-align: center;
    padding: 15px 20px;
}
.currentImg img{
    vertical-align: middle;
}
.changeBtn{
    width: 70px;
    line-height: 35px;
    text-align: center;
    background-color: slategray;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    border-radius: 4px;
    display: inline-block;
    vertical-align: middle;
    font-family: 'Courier New', Courier, monospace;
    margin: 0 20px;
    cursor: pointer;
    user-select: none;
}
</style>

btn.vue

<template>
    <div>
        <div class="btn-list">
            <div class="btn" @click="changeStr('guanxiaotong')" :class="{'btnCur': $store.state.current == 'guanxiaotong'}">关晓彤</div>
            <div class="btn" @click="changeStr('jindong')" :class="{'btnCur': $store.state.current == 'jindong'}">靳东</div>
            <div class="btn" @click="changeStr('yangmi')" :class="{'btnCur': $store.state.current == 'yangmi'}">杨幂</div>
            <div class="btn" @click="changeStr('luhan')" :class="{'btnCur': $store.state.current == 'luhan'}">鹿晗</div>
        </div>
    </div>
</template>

<script>
    export default {
        methods:{
            changeStr(str){
                this.$store.commit("changeStr",{str})
            }
        }
    }
</script>

<style scoped>
.btn-list{
    text-align: center;
}
.btn-list .btn{
    cursor: pointer;
    padding: 15px 25px;
    color: #fff;
    background-color: sandybrown;
    border-radius: 4px;
    display: inline-block;
    margin: 0 20px;
    user-select: none;
}
.btn-list .btnCur{
    background: royalblue;
}
</style>

SmallImg.vue

<template>
    <div>
        <div class="small-img-list">
            <img v-for="(item ,index) in 5" :key="index" :src="SmallImgSrc($store.state.current,item)" :class="{'smallCur': $store.state.idx == item}" @click="ChangeCurrent(item)" alt="">
        </div>
    </div>
</template>

<script>
    export default {
        methods:{
            SmallImgSrc(url,i){
                return require(`../assets/${url}/${i}.jpg`)
            },
            ChangeCurrent(idx){
                this.$store.commit("ChangeCurrent",{idx})
            }
        }
    }
</script>

<style scoped>
    .small-img-list{
        text-align: center;
    }
    .small-img-list img{
        width: 100px;
        margin: 0 15px;
        cursor: pointer;
    }
    .smallCur{
        border: 4px solid orangered;
        border-radius: 4px;
    }
</style>

效果