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

亦凉 2021-09-16 03:08 339阅读 0赞

# 使用Vuex实现数据数据共享 #

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

## Vuex基础知识 ##

Vuex是什么呢？

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

通俗理解：

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

![70][]

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"></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组件中的城市，已经同步修改好了。

[70]: /images/20210802/f687ee428cdf4c77acba055ead01fd53.png