Vuex

2018-09-19 本文已影响7人 passMaker

在 Vuejs 2.5 开发旅游网站项目时，需要实现 city 页面的数据传递给 index 首页。由于 City.vue 和 Home.vue 没有公用父级组件，这样就无法通过一个公用的父级组件进行数据的中转。除了使用 bus 总线，还可以使用 Vuex 数据层框架来实现。

Vuex 图解

设计理念

当一个项目之中各个页面或者多个组件之间进行数据传值很困难的时候。如果可以把公用的数据放到一个公共的存储空间去存储。然后某一个组件改变了公共的数据，其他的组件就可以感知到数据的改变。

上图中绿色 Vuex 虚线的内容就是一个公用数据存储区域。这个区域可以理解成一个仓库。这个仓库由几部分构成。
所有的公用数据，存放在 State 之中（紫色）。如果组件想用公用的数据，直接去调用 State 即可。

有时候，希望改变 State 里面的数据。不能直接让组件去改动数据。必须通过相应的流程完成。流程如下：

如果有异步操作或者复杂的同步操作，那么将它们放置在 Actions （黄色），组件先去调用 Actions ，Actions 紧接着去调用 Mutations （红色），而 Mutations 逐个的对 State 的修改。
也可以越过 Actions ，让组件直接调用 Mutations ，修改 State 里面的数据。

使用

在 Vuejs 2.5 开发旅游页项目中的使用方法记录。

创建 store 文件夹，index.js 文件。Store 相当于图示中的公共数据区域（绿色虚线），随后再创建一个 state。

并在 main.js 中声明。

直接使用 {{this.$store.state.city}} 来使用刚刚 store 中 state 下面 city 的数据。

完善 store 的 index.js 代码

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    city: '重庆'
  },
  // actions 可省略
  actions: {
    changeCity (ctx, city) {
      ctx.commit('changeCity', city)
    }
  },
  mutations: {
    changeCity (state, city) {
      state.city = city
    }
  }
})