store.JS
- import axios from '@/utils/request'
- export default {
- state: { // 首页需要的初始化数据
- bannerlist: [],
- prolist: []
- },
- getters: { // state 的计算属性
- },
- actions: { // 当前页面需要的异步操作
- getBannerlist (context) { // 请求轮播图数据, context 上下文对象
- axios.get('/banner').then(res => {
- context.commit({ // 唯一改变状态管理器的方式就是显示的提交 mutation
- type: 'changeBannerlist',
- data: res.data.data
- })
- })
- },
- getProlist ({ commit }) { // 参数解构
- axios.get('/pro').then(res => {
- commit({
- type: 'changeProlist',
- data: res.data.data
- })
- })
- }
- },
- mutations: {
- changeBannerlist (state, data) {
- state.bannerlist = data.data
- },
- changeProlist (state, data) {
- state.prolist = data.data
- }
- }
- }
index.vue
- <template>
- <div class="box">
- <header class="header">
- <router-link to="/search"> 搜索 </router-link>
- </header>
- <div class="content" id="content">
- <!-- 轮播图 -->
- <van-swipe :autoplay="4000" indicator-color="white">
- <van-swipe-item v-for="item of bannerlist" :key="item.bannerid">
- <img :src="item.img" alt="">
- </van-swipe-item>
- </van-swipe>
- <Prolist :prolist="prolist" />
- </div>
- </div>
- </template>
- <script>
- import Vue from 'vue'
- import { Swipe, SwipeItem } from 'vant'
- import { mapState } from 'vuex'
相当于 import vuex from "vuex"
- let mapState = vuex.mapState
- import Prolist from '@/components/Prolist'
- Vue.use(Swipe).use(SwipeItem)
- export default {
- components: {
- Prolist
- },
- computed: { // 使用组件的计算属性获取状态管理器中的数据, 具有依赖性
- ...mapState({ // 获取状态管理器中的数据
- bannerlist: (state) => { // 默认参数为 state ---- 所有的状态 state
- console.log(state) // { home: {}, kind: {}, cart: {}}
- return state.home.bannerlist
- },
- // prolist: ({ home }) => home.prolist
- prolist: ({ home: { prolist } }) => prolist // 解构赋值
- })
- },
- created () {
- // 触发状态管理器中的 actions
- this.$store.dispatch('getBannerlist')
- this.$store.dispatch('getProlist')
- }
- }
- </script>
- <style lang="sCSS">
- .van-swipe {
- // height: 180px;
- img {
- width: 100%;
- }
- }
- .backtop {
- position: fixed;
- bottom: 60px;
- right: 10px;
- font-size: 30px;
- }
- </style>
来源: http://www.bubuko.com/infodetail-3338416.html