使用Vuex实现数据数据共享

City与Home组件没有公共父级组件,要实现共有数据分享,可以借助Vuex。

Vuex基础知识

Vuex是什么呢?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

通俗理解:

当一个项目中,各个页面(多个组件)之间进行复杂的数据传值很困难的时候,我们可以设想,把公共的数据放置到一个公共的空间去存储。随后,某一个组件改变了公共的数据,其他组件就可以感知到即可。因此,Vuex应运而生,是一种单向数据的改变流程。

Vuex可以看做一个仓库store,有State,Mutations,Actions组成。

(1)State存储所有的公用数据,组件使用数据时,调动State即可。

(2)Actions中放置异步操作和很复杂的批量的同步操作,组件通过调用Dispatch方法来操作Actions,Actions通过调用Commit方法来操作Mutations;

(3)Mutations中放置的是一个个对State同步的修改。

(4)有时候,可以直接调用Mutations修改数据,具体做法也是调用Commit方法。

安装

npm install vuex --save

使用

在src目录下,新建store文件夹,在store文件夹下新建index.js文件。

// store文件夹下index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

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

在main.js中引入index.js,并在实例中传入store。

// main.js
import store from './store/index.js'

new Vue({
    el: '#app',
    router,
    store, // 在根实例中传入store
    components: { App },
    template: '<App/>'
})

数据共享

在home/components/Header中对应的位置实现数据绑定

    // home/components/Header
    <router-link to="/city">
      <div class="header-right">
        {{this.$store.state.city}} // 使用vuex实现数据绑定
        <span class="iconfont arrow-icon">&#xe6aa;</span>
      </div>
    </router-link>

实现List、Home之间的数据共享

在List组件中对应的标签绑定(注意:传入参数),直接调用commit方法操作Mutations,其中有changeCity方法(changeCity方法有两个参数state与传入的参数city),该方法必须在Mutations中声明(在上面index.js文件)。

      // List组件
      <div class="area">
        <div class="title border-topbottom">热门城市</div>
        <div class="button-list">
          <div class="button-wrapper" v-for="item of hotCities" :key="item.id" @click="handleCityClick(item.name)">
            <div class="button">{{item.name}}</div>
          </div>
        </div>
      </div>
    // List组件
    methods: {
      handleCityClick(city){
        this.$store.commit('changeCity', city);
        this.$router.push('/');
      }
    }

注意:此处使用的路由跳转不是router-link而是采用编程式导航中$router属性下的push方法。

此时,List组件中当前城市中的城市与Home组件Header组件中的城市,已经同步修改好了。

Logo

前往低代码交流专区

更多推荐