vuex传值点击城市就是首页显示哪个城市

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    cityName:'北京'
  },
  mutations: {
    changeCity(state,city){
      state.cityName=city
    }
  },
  actions: {
  },
  modules: {
  }
})

---

banner里面导入mapState

import {mapState} from 'vuex'

computed里面使用

  computed: {
    ...mapState(['cityName'])
  },

template里面使用

      <router-link to="/city">  <div class="top-left" >{{cityName}}<i class="iconfont">&#xe6aa;</i></div></router-link>

---

点击哪个显示哪个

import {mapMutations} from 'vuex'

点击触发函数传递city,传给store里面的mutation,并把city传过去了

 <div class="city-item" v-for="(item, index) in mapCities" :key="index">
      <p>定位/附近城市</p>
      <div @click="toHome(item.name)">{{ item.name }}</div>
    </div>

 

  methods: {
      toHome(city){
          this.changeCity(city)
          this.$router.push({path:"/"})
      },
           ...mapMutations(["changeCity"])
  },