這篇文章主要介紹了Vuex入門到上手教程，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

一、前言

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

二、什麼是Vuex

Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。這裡的關鍵在於集中式儲存管理。 這意味著本來需要共享狀態的更新是需要元件之間通訊的，而現在有了vuex，就元件就都和store通訊了 。

三、什麼時候使用Vuex

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

四、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
 

五、如何使用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 函式可以接受一個物件，也可以接收一個數組`
`};`

由於 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事件則不能實現非同步效果。

以上就是本文的全部內容，希望對大家的學習有所幫助。