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

使用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而是采用编程式导航中$store属性下的push方法。

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