一、vuex介紹
（1）vuex是什么？
1. 借鑒 了Flux、Redux、 The Elm Architecture
2. 專為 Vue.js 設計 的狀態管理模式
3. 集中式存儲和管理應用程序中所有組件的狀態
4. Vuex 也集成到 Vue 的官方調試工具
5. 一個 Vuex 應用的核心是 store（倉庫，一個容器），store包含著你的應用中大部分的狀態 (state)。
（2）什么情況下我應該使用 Vuex？
1. 不適用：小型簡單應用，用 Vuex 是繁瑣冗余的，更適合使用簡單的 store 模式。
2. 適用于：中大型單頁應用，你可能會考慮如何把組件的共享狀態抽取出來，以一個全局單例模式管理，不管在哪個組件，都能獲取狀態/觸發行為，解決問題如下：
① 多個視圖使用于同一狀態：
傳參的方法對于多層嵌套的組件將會非常繁瑣，并且對于兄弟組件間的狀態傳遞無能為力
② 不同視圖需要變更同一狀態：
采用父子組件直接引用或者通過事件來變更和同步狀態的多份拷貝，通常會導致無法維護的代碼
（3）Vuex 和單純的全局對象有何不同？
1.Vuex 的狀態存儲是響應式的
當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那么相應的組件也會相應地得到高效更新。
2.你不能直接改變 store 中的狀態
改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation，方便我們跟蹤每一個狀態的變化。
二、vuex安裝
* vue cli 3 中搭建腳手架預設時選擇了“vuex”后便安裝了vuex，可跳過此步閱讀
（1）<script>引入
在 Vue 之后引入 vuex 會進行自動安裝：
<script src="/path/to/vue.js"></script><script src="/path/to/vuex.js"></script>
（2） 包管理
npm install vuex --save //yarn add vuex
在一個模塊化的打包系統中，您必須顯式地通過 Vue.use() 來安裝 Vuex：
import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)
（3）git clone 自己構建
git clone https://github.com/vuejs/vuex.git node_modules/vuexcd node_modules/vuexnpm installnpm run build
（4）兼容
Vuex 依賴 Promise。如果你支持的瀏覽器并沒有實現 Promise (如 IE)，那么你可以使用一個 polyfill 的庫(如 es6-promis)
1.你可以通過 CDN 將其引入，window.Promise 會自動可用：
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
2.包管理器安裝：
npm install es6-promise --save //yarn add es6-promise
然后，將下列代碼添加到你使用 Vuex 之前的一個地方：
import 'es6-promise/auto'
三、使用
（1）使用介紹
1.搭建store實例
①. 在創建vuex實例的地方引入vue、vuex，使用vuex：
import Vue from 'vue'//引入vueimport Vuex from 'vuex'//引入vuexVue.use(Vuex); //使用 vuex
②. 如果你的actions中用到 store.dispath() ,要引入store
import store from './store' //引入狀態管理 store
③. new 一個 Vuex.Store 實例，并注冊 state、mutations、actions、getters到 Vuex.Store 實例中
ps. 你可以像上面那樣將“屬性和值”直接寫在實例中，當代碼量大時，你也可以分別寫個.js文件，如下圖：
然后引入到 store/index.js 注冊到vuex實例中，如：
2.創建好 vuex.store 后，你需要在入口文件 main.js 中引入 store 并注冊到 vue 實例中，這樣就可以在任何組件使用store了：
3.在組件中使用：
①. 引入vuex中各屬性對應的輔助函數：
import {mapActions, mapState,mapGetters} from 'vuex' //注冊 action 、 state 、getter②. 使用store中的狀態數據、方法：
使用方法有很多，這種事最簡單實用的，更多可以查看官網學習：https://vuex.vuejs.org/zh/
（2）具體demo
來個簡單易懂的計數
eg：store.js
import Vue from 'vue';import Vuex from 'vuex'; //引入 vueximport store from './store' //注冊storeVue.use(Vuex); //使用 vuexexport default new Vuex.Store({ state: { // 初始化狀態 count: 0, someLists:[] }, mutations: { // 處理狀態 increment(state, payload) { state.count += payload.step || 1; } }, actions: { // 提交改變后的狀態 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', {//調用increment()方法 step: 10 }) } } }, getters: { //處理列表項 someLists: state =>param=> { return state.someLists.filter(() => param.done) } }})使用時，eg：
main.js：
import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store' //引入狀態管理 storeVue.config.productionTip = falsenew Vue({ router, store,//注冊store(這可以把 store 的實例注入所有的子組件) render: h => h(App)}).$mount('#app')views/home.vue：
<template> <div class="home"> <!--在前端HTML頁面中使用 count--> <HelloWorld :msg="count"/> <!--表單處理 雙向綁定 count--> <input :value="count" @input="incrementStep"> </div></template><script> import HelloWorld from '@/components/HelloWorld.vue' import {mapActions, mapState,mapGetters} from 'vuex' //注冊 action 和 state export default { name: 'home', computed: { //在這里映射 store.state.count，使用方法和 computed 里的其他屬性一樣 ...mapState([ 'count' ]), count () { return store.state.count } }, created() { this.incrementStep(); }, methods: { //在這里引入 action 里的方法，使用方法和 methods 里的其他方法一樣 ...mapActions([ 'incrementStep' ]), // 使用對象展開運算符將 getter 混入 computed 對象中 ...mapGetters([ 'someLists' // ... ]) }, components: { HelloWorld } }</script>運行結果：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
