vuex是什么？

vuex是什么呢？首先來看一下vuex官網(wǎng)上對vuex的介紹

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

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

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

vuex的簡單實例

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

然后通過在Vue組件中通過dispach()方法去觸發(fā)action函數(shù)調(diào)用

States

States是一個對象，里面可以定義多個vuex中要用來管理的數(shù)據(jù)，這里理解起來不難，接下來說一下mapState這個輔助函數(shù)
什么是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中的數(shù)據(jù)'count']) } </script><style>#div1{background-color: pink;} </style>

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

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

Actions

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

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

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

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

接下來看一下vuex官網(wǎng)上對參數(shù)的解釋

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

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

Mutations

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

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

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

Getters

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

Modules

modules，vuex中的模塊?？纯磛uex官網(wǎng)上的解釋：

由于使用單一狀態(tài)樹，應(yīng)用的所有狀態(tài)會集中到一個比較大的對象。當(dāng)應(yīng)用變得非常復(fù)雜時，store 對象就有可能變得相當(dāng)臃腫。

為了解決以上問題，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 的狀態(tài) store.state.b // -> moduleB 的狀態(tài)

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。