1、Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式寞宫。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。Vuex 也集成到 Vue 的官方調(diào)試工具 devtools extension等孵，提供了諸如零配置的 time-travel 調(diào)試、狀態(tài)快照導(dǎo)入導(dǎo)出等高級調(diào)試功能蹂空。
Vuex的文檔說明
Vuex的github
2俯萌、Vuex 共享狀態(tài)
image.png
3果录、Vuex安裝
npm install vuex --save
4、在src下創(chuàng)建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) 在需要引入的數(shù)據(jù)的vue文件中
<template>
<div class="header"> {{this.city}} </div>
<script>
import { mapState } from 'vuex'
export default{
name: 'HomeHeader',
computed: {
...mapState(['city'])
}
}
</script>
