4回答

Samrtiboy

2020-09-18

同学你好，我刚学好这块，我觉得这块挺好理解的，就是通过了vuex这个状态管理模式来实现的，因此肯定要把vuex基本的使用流程掌握，建议同学可以参考Vuex的官方文档，写的很详细。了解vuex的使用之后，就可以很简单地实现，基本逻辑如下：

1.先创建一个共享的状态（state）

state: {
    city: '上海'
  },

2.通过下面代码获取共享的状态

this.$store.state.city

3.创建一个mutations（改变）选项来改变我们的共享状态值

mutations: {
    // 第一个参数是state对象（共享的状态）
    // 第二个参数是传递过来的值
    changeCity (state, city) {
      state.city = city
    }
  }

4.在我们点击城市名称需要改变共享状态数据的元素上绑定一个点击事件，点击事件里（commit）提交我们要改变的数据

// 第一个参数是对应mutations中的方法
// 第二个参数是要传递过去的值
this.$store.commit('changeCity', city)

通过以上四步骤基本上已经完成了点击城市改变对应的值，如果想要改变值之后跳转至首页，则需要我们进行路由跳转操作

this.$router.push('/')

以上是我自己的理解仅供参考哦~我觉得关键在于理解和掌握Vuex的使用，业务逻辑上还是很好理解的。

1

0

花花公子2016

2021-04-08

这个地方逻辑是做了的，改变城市图片没有变化是因为，没有mock数据。

0

0

Samrtiboy

2020-09-20

不好意思前面理解错了，不过同学你说的这个功能，我们其实已经实现了，你可以仔细阅读一下Home组件，我们在切换城市之后我们会请求对应城市的数据，如下代码：

const {data: res} = await axios.get('/api/index.json?city=' + this.city)

每当我们进行切换城市的操作时，对应的city值会进行改变，那么名称改变之后请求接口的参数也会改变，只是我们没有写后端的内容，正常业务逻辑是后端把我们请求的对应城市的数据返回给我们，而我们使用的是静态模拟数据。

0

0

qq_婚姻_03680676

提问者

2020-09-19

首先感谢同学的详细讲解。
这步我知道。可能是我描述的没具体化。我说的是切换城市名称后。把对应主页下面所以图片和文字也切换成该城市的美食美景图片。
这个有点迷糊。需要详细讲解。

0

0