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>
