使用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。

    // home/components/Header{{this.$store.state.city}} // 使用vuex实现数据绑定

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

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

      // List组件热门城市{{item.name}}

    // List组件methods: {handleCityClick(city){this.$store.commit('changeCity', city);this.$router.push('/');}}

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

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！