Vuex入門到上手教程

這篇文章主要介紹了Vuex入門到上手教程，小編以爲挺不錯的，如今分享給你們，也給你們作個參考。一塊兒跟隨小編過來看看吧

1、前言

當咱們的應用遇到多個組件共享狀態時，會須要多個組件依賴於同一狀態。傳參的方法對於多層嵌套的組件將會很是繁瑣，而且對於兄弟組件間的狀態傳遞無能爲力。在搭建下面頁面時，你可能會對 vue 組件之間的通訊感到崩潰 ，特別是非父子組件之間通訊。此時就應該使用vuex，輕鬆能夠搞定組件間通訊問題。

2、什麼是Vuex

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。這裏的關鍵在於集中式存儲管理。 這意味着原本須要共享狀態的更新是須要組件之間通信的，而如今有了vuex，就組件就都和store通信了 。

3、何時使用Vuex

雖然 Vuex 能夠幫助咱們管理共享狀態，但也附帶了更多的概念和框架。這須要對短時間和長期效益進行權衡。 若是您的應用夠簡單，您最好不要使用 Vuex,由於使用 Vuex 多是繁瑣冗餘的。一個簡單的global event bus就足夠您所需了。可是， 若是您須要構建一箇中大型單頁應用，您極可能會考慮如何更好地在組件外部管理狀態，Vuex 將會成爲天然而然的選擇。

4、Vuex安裝(限定開發環境爲 vue-cli)

首先要安裝vue-cli腳手架，對於大陸用戶，建議將npm的註冊表源設置爲國內的鏡像(淘寶鏡像），能夠大幅提高安裝速度。

`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

5、如何使用Vuex

1.如何經過Vuex來實現以下效果？

①建立一個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 函數能夠接受一個對象，也能夠接收一個數組`
`};`
`</``script``>`

因爲 store 中的狀態是響應式的，當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麼相應的組件也會相應地獲得高效更新。 在組件中調用 store 中的狀態簡單到僅須要在計算屬性中返回便可。改變store 中的狀態的惟一途徑就是顯式地提交 (commit) mutations。

這樣，咱們就能夠實現自增1或是自減1，那假如咱們想要點擊一次實現自增2，這該如何實現，也就是如何向Mutations傳值？

2.如何在Mutations裏傳遞參數

先store.js文件裏給add方法加上一個參數n

`mutations: {`
`add(state,n) {`
`state.count+=n;`
`},`
`reduce(state){`
`state.count--;`
`}`
`}`
而後在Count.vue裏修改按鈕的commit( )方法傳遞的參數

`addNumber() {`
`return` `this``.$store.commit(``"add"``,2);`
`},`
`reduceNumber() {`
`return` `this``.$store.commit(``"reduce"``);`
`}`

3.getters如何實現計算過濾操做**
getters從表面是得到的意思，能夠把他看做在獲取數據以前進行的一種再編輯,至關於對數據的一個過濾和加工。你能夠把它看做store.js的計算屬性。

例如：要對store.js文件中的count進行操做，在它輸出前，給它加上100。

首先要在store.js裏Vuex.Store()裏引入getters

getters:{
count:state=>state.count+=100
}
而後在Count.vue中對computed進行配置，在vue 的構造器裏邊只能有一個computed屬性，若是你寫多個，只有最後一個computed屬性可用，因此要用展開運算符」…」對上節寫的computed屬性進行一個改造。

`computed: {`
`...mapState([``"count"``]),`
`count() {`
`return` `this``.$store.getters.count;`
`}`
`}`

須要注意的是，此時若是點擊'+'，就會增長102，若是點擊'-',就會增長99，最後的結果是mutations和getters共同做用的。

4.actions如何實現異步修改狀態

actions和上面的Mutations功能基本同樣，不一樣點是， actions是異步的改變state狀態，而Mutations是同步改變狀態 。

①在store.js中聲明actions

`actions: {`
`addAction(context) {`
`context.commit(``'add'``, 2);``//一開始執行add,並傳遞參數2`
`setTimeout(() => {`
`context.commit(``'reduce'``)`
`}, 2000);``//兩秒後會執行reduce`
`console.log(``'我比reduce提早執行'``);`
`},`
`reduceAction({`
`commit`
`}) {`
`commit(``'reduce'``)`
`}`
`}`

actions是能夠調用Mutations裏的方法的,調用add和reduce兩個方法。在addAction裏使用setTimeOut進行延遲執行。在actions裏寫了兩個方法addAction和reduceAction，兩個方法傳遞的參數也不同。

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事件則不能實現異步效果。

以上就是本文的所有內容，但願對你們的學習有所幫助。