使用Vuex实现数据共享

1、Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

Vuex的文档说明

Vuex的github

2、Vuex 共享状态

image.png

3、Vuex安装

npm install vuex --save

4、在src下创建store文件夹，并分别建立index.js、state.js、actions.js、mutations.js

(1) index.js中引入vuex

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  actions,
  mutations
})

(2) state.js中引入vuex

let defaultCity = '深圳'
try {
  if (localStorage.city) {
    defaultCity = localStorage.city
  }
} catch (e) {}

export default {
  city: defaultCity
}

(3) actions.js中引入vuex

export default {
  changeCity (ctx, city) {
  // this.state.city = city
    ctx.commit('changeCity', city)
  }
}

(4) mutations.js中引入vuex

export default {
  changeCity (state, city) {
    state.city = city
    try {
      localStorage.city = city
    } catch (e) {}
  }
}

(5) main.js中引入store

import Vue from 'vue'
import App from './App'
import store from './store'

new Vue({
  el: '#app',
  store,
  components: { App },
  template: '<App/>'
})

(6) 在需要引入的数据的vue文件中

<template>
  <div class="header"> {{this.city}} </div>
<script>
import { mapState } from 'vuex'
export default{
  name: 'HomeHeader',
  computed: {
    ...mapState(['city'])
  }
}
</script>