vuex是什么？

vuex是什么呢？首先來看一下vuex官網上對vuex的介紹

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension (opens new window)，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。

從總體可以理解，vuex是一個管理狀態的工具，如果你學過redux那么vuex是真的Soeasy！vuex和redux一樣都是用來管理狀態的，內部可以理解為一顆狀態樹，他只負責數據部分，從而頁面只需要對UI進行渲染。vuex和redux的思想不能說毫無關系，只能說一模一樣，哈！vuex是Vue的插件，但是redux是獨立于react的。

vuex中的幾個重要的部分
States——數據狀態
Actions——組件用來觸發Mutation調用的方法，內部可以執行異步操作
Mutations——用來修改states中的狀態數據的函數集合
Getters——可以理解getters是vuex中的計算屬性
Modules——子模塊，不使用modules那么整個vuex將是一個復雜的大模塊，當數據量大的時候難以操作，module是將vuex拆分為多個子模塊，方便管理。

vuex的簡單實例

import Vuex from 'vuex' Vue.use(Vuex);const store = new Vuex.Store({state:{//管理的狀態count:1},getters:{//可以認為getters是vuex中的計算屬性AllCount(state){return state.count +'123'}},actions:{//用來觸發mutation函數，可以執行異步操作dj:function(context){context.commit('dj2')}},mutations:{//用來修改狀態的函數集合，只能執行同步函數dj2:function(state){state.count++}},modules:{//vuex中的模塊，可以理解為，將vuex中的狀態樹劃分為多個子樹} })export default store

然后通過在Vue組件中通過dispach()方法去觸發action函數調用

States

States是一個對象，里面可以定義多個vuex中要用來管理的數據，這里理解起來不難，接下來說一下mapState這個輔助函數
什么是mapState呢，這是vuex中的幾個重要的api，mapState只是其中的一種，用來方便用戶操作state

<template><div id="div1" @click="dj">hello niaho {{$store.state.count}}{{$store.getters.AllCount}}<div id='div2'>{{count}}</div><HelloWorld></HelloWorld></div> </template> <script> import HelloWorld from './components/HelloWorld.vue' import {mapState} from 'vuex'export default {name: 'app',components: {HelloWorld},methods:{dj(){this.$store.dispatch('dj')}},computed:mapState([//用來獲得vuex中的數據'count']) } </script><style>#div1{background-color: pink;} </style>

其實可以理解這一些vuex的api就是一些語法糖，從代碼中可以看到，使用了mapState之后就可以少寫一些像￥store.state.count這樣的語句

除了上面的方法還可以使用結構對象的方法 computed: {localComputed () { /* ... */ },// 使用對象展開運算符將此對象混入到外部對象中...mapState({// ...}) }

Actions

大家是不是有一個疑問，為什么要多此一舉去配置一個action，然后再通過action去觸發mutation去修改狀態了？剛開始我也感覺，不知道大家有沒有了解過redux，redux中也有action，其實vuex和redux的思路差不多一模一樣，理由就是mutation中只能執行同步的函數（為什么了？你想數據變化如果是異步的話那么頁面的顯示會出錯，跟蹤數據也不能夠進行），所以必須得有一個方法可以處理異步方法，這個就是actions，當然actions也可以處理同步代碼。所以存在即有理!
例子：
組件中觸發通過dispach觸發

methods:{dj(){this.$store.dispatch('dj')}},

vuex中的Actions來處理，然后通過commit再次分發出去

actions:{//用來觸發mutation函數，可以執行異步操作dj:function(context){context.commit('dj2')}},

接下來看一下vuex官網上對參數的解釋

Action 函數接受一個與 store 實例具有相同方法和屬性的 context 對象，因此你可以調用 context.commit 提交一個 mutation，或者通過 context.state 和 context.getters 來獲取 state 和 getters。當我們在之后介紹到 Modules 時，你就知道 context 對象為什么不是 store 實例本身了。

Actions同樣也有語法糖，mapAction這里就不詳細說明了，不難！

Mutations

上一步已經通過Vue組件分發了action，接下來修改狀態的任務就交給mutation了。mutatons同樣也是一個對象，里面包含了若干個方法。mutations里面必須是同步的，這個必須得注意。

mutations:{//用來修改狀態的函數集合，只能執行同步函數dj2:function(state){state.count++}},

更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation。Vuex 中的 mutation 非常類似于事件：每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。這個回調函數就是我們實際進行狀態更改的地方，并且它會接受 state 作為第一個參數，如果想傳遞更多的參數，在后面添加就行。
同樣mutation也有語法糖，mapMutations

Getters

Getters其實就是vuex中的計算屬性，如果大家對Vue中的計算屬性computed熟悉的話，這個真的看一眼就會明白。在Vue組件中獲得計算屬性的結果是通過$store.getters.xxx
或者使用語法糖mapGetters。這里不一一解釋了。

Modules

modules，vuex中的模塊。看看vuex官網上的解釋：

由于使用單一狀態樹，應用的所有狀態會集中到一個比較大的對象。當應用變得非常復雜時，store 對象就有可能變得相當臃腫。

為了解決以上問題，Vuex 允許我們將 store 分割成模塊（module）。每個模塊擁有自己的
state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行同樣方式的分割

const moduleA = {state: () => ({ ... }),mutations: { ... },actions: { ... },getters: { ... } }const moduleB = {state: () => ({ ... }),mutations: { ... },actions: { ... } }const store = new Vuex.Store({modules: {a: moduleA,b: moduleB} })store.state.a // -> moduleA 的狀態 store.state.b // -> moduleB 的狀態

通過官網上的解釋，大家是不是感覺這就是像一顆樹，這一些模塊就像是子樹，子樹也具有root樹的一些基本特征。

好了，vuex基礎知識就說了這么一些，大家如果想繼續去了解的話，vuex官網講的還是非常詳細的。vuex中文官網

總結

以上是生活随笔為你收集整理的vuex基础知识的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。