效果展示
vuex基本使用
Vuex是vue的数据管理容器、
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
- 安装 npm install --save -dev vuex
- 创建store文件夹,内部创建store.js文件 --------vuex的store就是管理vue的数据仓库
- store.js
export default { state: { a: 100 }, mutations: { } }
-
在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')
-
全局使用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()"><</div>
<img :src="CurrentSrc($store.state.current,$store.state.idx)" alt="">
<div class="changeBtn" @click="nextCurrent()">></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>
效果