開始前，請嘗試?yán)斫庀旅孢@張圖的關(guān)系，或許有助于你理解下面的有關(guān)Vuex的使用介紹。

Vuex使用方法

題題題1、安裝??

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

npm?install?vuex
2、注冊??

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

新建文件main.js。

在全局Vue實(shí)例中注冊Vuex

3、state??

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

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

4、getters??

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

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

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

5、mutations?

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

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

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

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

6、actions?

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

讓我們創(chuàng)建一個(gè)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一個(gè)action,間接的達(dá)到修改數(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的基本使用方法，希望有助于你的進(jìn)一步理解~

歷史內(nèi)容

What exactly is Node.js？

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

補(bǔ)充總結(jié)node

loading小案例

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

瀏覽器發(fā)展史

總結(jié)

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

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