開始前，請嘗試理解下面這張圖的關(guān)系，或許有助于你理解下面的有關(guān)Vuex的使用介紹。

Vuex使用方法

題題題1、安裝??

如果你已經(jīng)開始了一個項目，我們直接運行命令安裝Vuex?

npm?install?vuex
2、注冊??

將有關(guān)Vuex的代碼保存在新建的文件store.js。當(dāng)然，您可以隨意命名。我們將在此文件中擁有存儲對象，然后將其導(dǎo)入到main.js，我們將在全局Vue實例中注冊Vuex。

新建文件main.js。

在全局Vue實例中注冊Vuex

3、state??

在我們的store.js文件中，需要在store中存儲一些數(shù)據(jù)，然后其他組件將對其進行mutaition操作state對象。

我們可以使用預(yù)定義的關(guān)鍵字將數(shù)據(jù)添加到我們的store中state，然后像我們在使用data()中的數(shù)據(jù)一樣，用this.$store.state拿到并使用

4、getters??

在一些情況下，我們需要在使用state數(shù)據(jù)之前進行數(shù)據(jù)處理或進行一些數(shù)學(xué)運算。使用getter，我們可以對數(shù)據(jù)執(zhí)行操作，然后得到處理過的數(shù)據(jù)結(jié)果。getter需要狀態(tài)對象,這由Vuex自動傳遞給getter。

上面例子中，我們已經(jīng)用過counter這個計算屬性，用于跟蹤單擊按鈕的次數(shù)，然后檢索它。那么，在顯示點擊次數(shù)之前，我們將點擊次數(shù)增加一倍如何呢？我們可以使用getter來達到這個結(jié)果。

我們已經(jīng)創(chuàng)建了getter。讓我們在App.vue組件中使this.$store.getters。

5、mutations?

更改數(shù)據(jù)屬性的state時，只需執(zhí)行mutation即可。在mutation中指定要對data屬性進行的更改。

讓我們創(chuàng)建一個mutation來改變state中的數(shù)據(jù)。記得，mutations需要訪問state對象才能對指定數(shù)據(jù)名進行操作。

說到使用mutation，情況有所不同。與getter和state不同，并不會像那樣訪問mutationthis.$store.mutations。而是commit一個指定的mutation名稱。

在clicked()方法中，我們告訴Vuex 提交一個名為increment的mutation，從而更改state中的數(shù)據(jù)

6、actions?

action調(diào)用mutation進行異步操作的功能。與mutation不同，action可以包含異步操作。

讓我們創(chuàng)建一個action來調(diào)用mutation，間接的操作數(shù)據(jù)。

import?Vue?from?'vue';
import?Vuex?from?'vuex';

Vue.use(Vuex);

export?const?store=new?Vuex.Store({
????state:{
????????counter:0
????},
????getters:{
????????doubleClicks:state=>{
????????????return?state.counter?*?2;
????????}
????},
????mutations:{
????????increment:state=>{
????????????state.counter++
????????}
????},
????actions:{
????????asyncIncrement:({commit})=>{
????????????setTimeout(()?=>?{
????????????????commit('increment');
????????????},?2000);
????????}
????}
})

與mutation類似，我們在應(yīng)用中dispatch一個action,間接的達到修改數(shù)據(jù)的效果。

<template>
????<div?class="home">
????????<h1>Number?of?clicks:{{counter}}h1>
????????<button?@click="clicked">Start?action?herebutton>
????div>
template>

<script>export?default?{computed:{
????????counter(){return?this.$store.state.counter;
????????}
????},methods:{
????????clicked(){this.$store.dispatch('increment')
????????}
????}
}script>

以上是Vuex的基本使用方法，希望有助于你的進一步理解~

歷史內(nèi)容

What exactly is Node.js？

用node搭建一個服務(wù)器

補充總結(jié)node

loading小案例

國產(chǎn)瀏覽器的發(fā)展史

瀏覽器發(fā)展史

總結(jié)

以上是生活随笔為你收集整理的getter方法的作用 vuex_Vuex入门篇——基本使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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