欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue项目笔记(19)-使用Vuex实现数据数据共享

程序员文章站 2022-04-28 09:35:43
...

使用Vuex实现数据数据共享

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

Vuex基础知识

Vuex是什么呢?

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

通俗理解:

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

vue项目笔记(19)-使用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而是采用编程式导航中$store属性下的push方法。

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

相关标签: 数据共享