這篇文章主要介紹了Vuex入門到上手教程流济，小編覺得挺不錯的奔则，現(xiàn)在分享給大家，也給大家做個參考未蝌。一起跟隨小編過來看看吧
一驮吱、前言
當我們的應(yīng)用遇到多個組件共享狀態(tài)時，會需要多個組件依賴于同一狀態(tài)萧吠。傳參的方法對于多層嵌套的組件將會非常繁瑣糠馆，并且對于兄弟組件間的狀態(tài)傳遞無能為力。在搭建下面頁面時怎憋，你可能會對 vue 組件之間的通信感到崩潰 又碌，特別是非父子組件之間通信。此時就應(yīng)該使用vuex绊袋，輕松可以搞定組件間通信問題毕匀。
二、什么是Vuex
Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式癌别。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)皂岔，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。這里的關(guān)鍵在于集中式存儲管理展姐。 這意味著本來需要共享狀態(tài)的更新是需要組件之間通訊的躁垛，而現(xiàn)在有了vuex，就組件就都和store通訊了 圾笨。
三教馆、什么時候使用Vuex
雖然 Vuex 可以幫助我們管理共享狀態(tài)，但也附帶了更多的概念和框架擂达。這需要對短期和長期效益進行權(quán)衡土铺。 如果您的應(yīng)用夠簡單，您最好不要使用 Vuex,因為使用 Vuex 可能是繁瑣冗余的板鬓。一個簡單的global event bus就足夠您所需了悲敷。但是， 如果您需要構(gòu)建一個中大型單頁應(yīng)用俭令，您很可能會考慮如何更好地在組件外部管理狀態(tài)后德，Vuex 將會成為自然而然的選擇。
四抄腔、Vuex安裝(限定開發(fā)環(huán)境為 vue-cli)
首先要安裝vue-cli腳手架瓢湃，對于大陸用戶窟赏，建議將npm的注冊表源設(shè)置為國內(nèi)的鏡像(淘寶鏡像），可以大幅提升安裝速度箱季。
`npm config` `set` `registry https:``//``[registry.npm.taobao.org](http:``//registry``.npm.taobao.org/)`
`npm config get registry``//``配置后可通過下面方式來驗證是否成功`
`npm` `install` `-g cnpm --registry=[https:``//registry``](https:``//registry/``).npm.taobao.org`
`//cnpm``安裝腳手架`
`cnpm` `install` `-g vue-cli`
`vue init webpack my-vue`
`cd` `my-vue`
`cnpm` `install`
`cnpm run dev`
腳手架安裝好后，再安裝vuex
cnpm install vuex --save
五棍掐、如何使用Vuex
1.如何通過Vuex來實現(xiàn)如下效果藏雏？
①創(chuàng)建一個store.js文件
`import Vue from` `"vue"`
`import Vuex from` `"vuex"`
`Vue.use(Vuex)`
`const store =` `new` `Vuex.Store({`
`state: {` `//這里的state必須是JSON，是一個對象`
`count: 1` `//這是初始值`
`},`
`mutations: {``//突變作煌，羅列所有可能改變state的方法`
`ad(state) {`
`state.count++;` `//直接改變了state中的值掘殴，而并不是返回了一個新的state`
`},`
`reduce(state){`
`state.count--;`
`}`
`}`
`});`
`export` `default` `store;``//用export default 封裝代碼，讓外部可以引用`
②在main.js文件中引入store.js文件
`import store from` `"./vuex/store"`
`new` `Vue({`
`router,`
`store,`
`el:` `'#app'``,`
`render: h => h(App)`
`})`
③新建一個模板count.vue
`<``template``>`
`<``div``>`
`<``h2``>{{msg}}</``h2``><``hr``/>`
`<``h2``>{{$store.state.count}}-{{count}}</``h2``>//這兩種寫法都可以`
`<``button` `@``click``=``"addNumber"``>+</``button``>`
`<``button` `@``click``=``"reduceNumber"``>-</``button``>`
`</``div``>`
`</``template``>`
`<``script``>`
`import {mapState} from 'vuex'`
`export default {`
`data() {`
`return {`
`msg: "Hello Vuex"`
`};`
`},`
`methods: {`
`addNumber() {`
`return this.$store.commit("add");`
`},`
`reduceNumber() {`
`return this.$store.commit("reduce");`
`}`
`},`
`computed: mapState(['count'])// 映射 this.count 到 this.$store.state.count`
`mapState 函數(shù)可以接受一個對象粟誓，也可以接收一個數(shù)組`
`};`
`</``script``>`
由于 store 中的狀態(tài)是響應(yīng)式的奏寨，當 Vue 組件從 store 中讀取狀態(tài)的時候，若 store 中的狀態(tài)發(fā)生變化鹰服，那么相應(yīng)的組件也會相應(yīng)地得到高效更新病瞳。 在組件中調(diào)用 store 中的狀態(tài)簡單到僅需要在計算屬性中返回即可。改變store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutations悲酷。
這樣套菜，我們就可以實現(xiàn)自增1或是自減1，那假如我們想要點擊一次實現(xiàn)自增2设易，這該如何實現(xiàn)逗柴，也就是如何向Mutations傳值？
2.如何在Mutations里傳遞參數(shù)
先store.js文件里給add方法加上一個參數(shù)n
`mutations: {`
`add(state,n) {`
`state.count+=n;`
`},`
`reduce(state){`
`state.count--;`
`}`
`}`
然后在Count.vue里修改按鈕的commit( )方法傳遞的參數(shù)
`addNumber() {`
`return` `this``.$store.commit(``"add"``,2);`
`},`
`reduceNumber() {`
`return` `this``.$store.commit(``"reduce"``);`
`}`
- 3.getters如何實現(xiàn)計算過濾操作**
getters從表面是獲得的意思顿肺，可以把他看作在獲取數(shù)據(jù)之前進行的一種再編輯,相當于對數(shù)據(jù)的一個過濾和加工戏溺。你可以把它看作store.js的計算屬性。
例如：要對store.js文件中的count進行操作屠尊，在它輸出前旷祸，給它加上100。
首先要在store.js里Vuex.Store()里引入getters
`getters:{`
`count:state=>state.count+=100`
`}`
然后在Count.vue中對computed進行配置讼昆，在vue 的構(gòu)造器里邊只能有一個computed屬性肋僧，如果你寫多個，只有最后一個computed屬性可用控淡，所以要用展開運算符”…”對上節(jié)寫的computed屬性進行一個改造嫌吠。
`computed: {`
`...mapState([``"count"``]),`
`count() {`
`return` `this``.$store.getters.count;`
`}`
`}`
需要注意的是，此時如果點擊'+'掺炭，就會增加102辫诅，如果點擊'-',就會增加99，最后的結(jié)果是mutations和getters共同作用的涧狮。
4.actions如何實現(xiàn)異步修改狀態(tài)
actions和上面的Mutations功能基本一樣炕矮，不同點是么夫， actions是異步的改變state狀態(tài)，而Mutations是同步改變狀態(tài) 肤视。
①在store.js中聲明actions
`actions: {`
`addAction(context) {`
`context.commit(``'add'``, 2);``//一開始執(zhí)行add,并傳遞參數(shù)2`
`setTimeout(() => {`
`context.commit(``'reduce'``)`
`}, 2000);``//兩秒后會執(zhí)行reduce`
`console.log(``'我比reduce提前執(zhí)行'``);`
`},`
`reduceAction({`
`commit`
`}) {`
`commit(``'reduce'``)`
`}`
`}`
actions是可以調(diào)用Mutations里的方法的,調(diào)用add和reduce兩個方法档痪。在addAction里使用setTimeOut進行延遲執(zhí)行。在actions里寫了兩個方法addAction和reduceAction邢滑，兩個方法傳遞的參數(shù)也不一樣腐螟。
context：上下文對象，這里你可以理解稱store本身困后。 {commit}：直接把commit對象傳遞過來乐纸，可以讓方法體邏輯和代碼更清晰明了
②模板中的使用
`<``p``>`
`<``button` `@``click``=``"addNumber"``>+</``button``>`
`<``button` `@``click``=``"reduceNumber"``>-</``button``>`
`</``p``>`
`<``p``> `
`<``button` `@``click``=``"addAction"``>+</``button``>//新增`
`<``button` `@``click``=``"reduceAction"``>-</``button``>//新增`
`</``p``>`
`import { mapState, mapGetters, mapActions } from` `"vuex"``;`
`methods:{`
`...mapMutations([`
`'add'``,``'reduce'`
`]),`
`...mapActions([``'addAction'``,``'reduceAction'``])`
`}`
最后得到如下效果：點擊addAction按鈕事件時，先累加2摇予，兩秒后再減去1汽绢，而addNumber事件則不能實現(xiàn)異步效果。
以上就是本文的全部內(nèi)容侧戴，希望對大家的學(xué)習(xí)有所幫助宁昭。
