一、vuex介紹
創(chuàng)新互聯(lián)公司，專注為中小企業(yè)提供官網(wǎng)建設(shè)、營銷型網(wǎng)站制作、自適應(yīng)網(wǎng)站建設(shè)、展示型成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)等服務(wù)，幫助中小企業(yè)通過網(wǎng)站體現(xiàn)價(jià)值、有效益。幫助企業(yè)快速建站、解決網(wǎng)站建設(shè)與網(wǎng)站營銷推廣問題。
（1）vuex是什么？
1. 借鑒 了Flux、Redux、 The Elm Architecture
2. 專為 Vue.js 設(shè)計(jì) 的狀態(tài)管理模式
3. 集中式存儲(chǔ)和管理應(yīng)用程序中所有組件的狀態(tài)
4. Vuex 也集成到 Vue 的官方調(diào)試工具
5. 一個(gè) Vuex 應(yīng)用的核心是 store（倉庫，一個(gè)容器），store包含著你的應(yīng)用中大部分的狀態(tài) (state)。
（2）什么情況下我應(yīng)該使用 Vuex？
1. 不適用：小型簡(jiǎn)單應(yīng)用，用 Vuex 是繁瑣冗余的，更適合使用簡(jiǎn)單的 store 模式。
2. 適用于：中大型單頁應(yīng)用，你可能會(huì)考慮如何把組件的共享狀態(tài)抽取出來，以一個(gè)全局單例模式管理，不管在哪個(gè)組件，都能獲取狀態(tài)/觸發(fā)行為，解決問題如下：
① 多個(gè)視圖使用于同一狀態(tài)：
傳參的方法對(duì)于多層嵌套的組件將會(huì)非常繁瑣，并且對(duì)于兄弟組件間的狀態(tài)傳遞無能為力
② 不同視圖需要變更同一狀態(tài)：
采用父子組件直接引用或者通過事件來變更和同步狀態(tài)的多份拷貝，通常會(huì)導(dǎo)致無法維護(hù)的代碼
（3）Vuex 和單純的全局對(duì)象有何不同？
1.Vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的
當(dāng) Vue 組件從 store 中讀取狀態(tài)的時(shí)候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會(huì)相應(yīng)地得到高效更新。
2.你不能直接改變 store 中的狀態(tài)
改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation，方便我們跟蹤每一個(gè)狀態(tài)的變化。
二、vuex安裝
* vue cli 3 中搭建腳手架預(yù)設(shè)時(shí)選擇了“vuex”后便安裝了vuex，可跳過此步閱讀
（1）
（2） 包管理
npm install vuex --save //yarn add vuex
在一個(gè)模塊化的打包系統(tǒng)中，您必須顯式地通過 Vue.use() 來安裝 Vuex：
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)
（3）git clone 自己構(gòu)建
git clone https://github.com/vuejs/vuex.git node_modules/vuex cd node_modules/vuex npm install npm run build
（4）兼容
Vuex 依賴 Promise。如果你支持的瀏覽器并沒有實(shí)現(xiàn) Promise (如 IE)，那么你可以使用一個(gè) polyfill 的庫(如 es6-promis)
1.你可以通過 cdn 將其引入，window.Promise 會(huì)自動(dòng)可用：
2.包管理器安裝：
npm install es6-promise --save //yarn add es6-promise
然后，將下列代碼添加到你使用 Vuex 之前的一個(gè)地方：
import 'es6-promise/auto'
三、使用
（1）使用介紹
1.搭建store實(shí)例
①. 在創(chuàng)建vuex實(shí)例的地方引入vue、vuex，使用vuex：
import Vue from 'vue'//引入vue import Vuex from 'vuex'//引入vuex Vue.use(Vuex); //使用 vuex
②. 如果你的actions中用到 store.dispath() ,要引入store
import store from './store' //引入狀態(tài)管理 store
③. new 一個(gè) Vuex.Store 實(shí)例，并注冊(cè) state、mutations、actions、getters到 Vuex.Store 實(shí)例中
ps. 你可以像上面那樣將“屬性和值”直接寫在實(shí)例中，當(dāng)代碼量大時(shí)，你也可以分別寫個(gè).js文件，如下圖：
然后引入到 store/index.js 注冊(cè)到vuex實(shí)例中，如：
2.創(chuàng)建好 vuex.store 后，你需要在入口文件 main.js 中引入 store 并注冊(cè)到 vue 實(shí)例中，這樣就可以在任何組件使用store了：
3.在組件中使用：
①. 引入vuex中各屬性對(duì)應(yīng)的輔助函數(shù)：
重慶分公司
重慶分公司
import {mapActions, mapState,mapGetters} from 'vuex' //注冊(cè) action 、 state 、getter②. 使用store中的狀態(tài)數(shù)據(jù)、方法：
使用方法有很多，這種事最簡(jiǎn)單實(shí)用的，更多可以查看官網(wǎng)學(xué)習(xí)：https://vuex.vuejs.org/zh/
（2）具體demo
來個(gè)簡(jiǎn)單易懂的計(jì)數(shù)
eg：store.js
import Vue from 'vue';
import Vuex from 'vuex'; //引入 vuex
import store from './store' //注冊(cè)store
Vue.use(Vuex); //使用 vuex
export default new Vuex.Store({
state: {
// 初始化狀態(tài)
count: 0,
someLists:[]
},
mutations: {
// 處理狀態(tài)
increment(state, payload) {
state.count += payload.step || 1;
}
},
actions: {
// 提交改變后的狀態(tài)
increment(context, param) {
context.state.count += param.step;
context.commit('increment', context.state.count)//提交改變后的state.count值
},
incrementStep({state, commit, rootState}) {
if (rootState.count < 100) {
store.dispatch('increment', {//調(diào)用increment()方法
step: 10
})
}
}
},
getters: {
//處理列表項(xiàng)
someLists: state =>param=> {
return state.someLists.filter(() => param.done)
}
}
})使用時(shí)，eg：
main.js：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store' //引入狀態(tài)管理 store
Vue.config.productionTip = false
new Vue({
router,
store,//注冊(cè)store(這可以把 store 的實(shí)例注入所有的子組件)
render: h => h(App)
}).$mount('#app')views/home.vue：
運(yùn)行結(jié)果：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
