簡單介紹

iPhone X 是 iPhone, Vuex 并不是 Vue.我們查看官方文檔可以知道：

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。

怎么理解呢？就拿我兩位數(shù)的資產(chǎn)的銀行卡來說吧，基本的存錢取錢，就是狀態(tài)管理。

怎么用

我們將以一個(gè)簡單的 Todo 作為例子，來講解 Vuex 的基本使用。

安裝

npm install vuex --save

初始化

首先需要在項(xiàng)目的 src 目錄下，新建一個(gè) Vuex 的目錄 store，結(jié)構(gòu)如下：

初始化 Vuex：

// index.js import Vue from 'vue' import Vuex from 'vuex' import state from './state.js'Vue.use(Vuex)export default new Vuex.Store({state })

引入 Vuex 是理所當(dāng)然的，除此之外執(zhí)行 Vue.use(Vuex) 來全局安裝 Vuex. Vuex.Store 即 Vuex 的構(gòu)造函數(shù)，來初始化 Vuex 實(shí)例。這里可以看到，我們?cè)?Vuex 構(gòu)造函數(shù)中傳入了一個(gè) state 選項(xiàng)，那這個(gè) state 是什么呢？

State

State 從字面意思理解，就是狀態(tài)，在 Vuex 里面，什么代表了狀態(tài)呢？數(shù)據(jù)。State 是 Vuex 這一狀態(tài)管理工具的唯一的數(shù)據(jù)源，所有的數(shù)據(jù)都儲(chǔ)存在里面。 State 的寫法如下：

// state.js const state = {todoList: JSON.parse(localStorage.getItem('todoList')) || [] }export default state

這里聲明了一個(gè) state, 里面有一個(gè) todoList 的字段，todoList 的數(shù)據(jù)是去 localStorage 里面拿的，如果沒有，就是一個(gè)空數(shù)組。 好了，現(xiàn)在我們的狀態(tài)已經(jīng)有了，接下來就是要在組件里面，獲取這個(gè) state, 也就是讓我們的組件拿到這里的數(shù)據(jù)。

Getter

Getter, 顧名思義，就是一個(gè)“取”的操作，來拿 state 里面的數(shù)據(jù)。Getter 的寫法如下:

// getters.js export const todoList = state => state.todoList

這里聲明并輸出了一個(gè) todoList 函數(shù)，函數(shù)的參數(shù)是 state, 返回值 state.todoList. Getter 函數(shù)接受 state 作為它的第一個(gè)參數(shù)。這里我們就取到了上一節(jié) state 里面的 todoList. 在需要 todoList 數(shù)據(jù)的組件當(dāng)中，可以利用 mapGetters 將數(shù)據(jù)映射到計(jì)算屬性。寫法如下：

import { mapGetters } from 'vuex'...export default {...computed: {...mapGetters(['todoList'])}... }

調(diào)用的時(shí)候，和普通的計(jì)算屬性別無二致:

<ul class="todo-list"><li v-for="(item, index) in todoList" :key="index" class="todo-item" >...</li> </ul>

這樣，todoList 就被渲染到了頁面中：

當(dāng)然，不管是標(biāo)記一個(gè)事項(xiàng)為完成，還是添加刪除事項(xiàng)，todoList 都會(huì)產(chǎn)生變化，也就是 state 會(huì)變化。那我們?cè)趺慈ジ淖?state 呢？這就需要 mutation 的幫助 。

Mutation

Mutation 是 Vuex 當(dāng)中改變 state 唯一的方法。Mutation 使用與事件處理函數(shù)非常相似，都具有類型和回調(diào)函數(shù)。 這里把 mutation 比作事件，首先來規(guī)定“事件類型”：

// mutation-types.js export const SET_TODO_LIST = 'SET_TODO_LIST'

這里規(guī)定了一個(gè) SET_TODO_LIST 的類型。 類型是不可變的，所以我們將其聲明為常量。 然后再來寫“事件”的“回調(diào)”：

// mutations.js import * as types from './mutation-types'const mutations = {[types.SET_TODO_LIST] (state, todoList) {state.todoList = todoList} } export default mutations

可以看到， mutations 是一個(gè)對(duì)象，一個(gè)“事件類型”就對(duì)應(yīng)可一個(gè)處理函數(shù)。處理函數(shù)接受 state 作為它的第一個(gè)參數(shù)，第二個(gè)參數(shù)是額外的，一般稱之為“荷載 (payload) ”。 這里我們的荷載是一個(gè) todoList，這個(gè)處理函數(shù)將 state 原來的 todoList 改為傳入的荷載。 要使用 mutations，在 Vuex 的構(gòu)造函數(shù)中，就要將 mutations 選項(xiàng)加進(jìn)去：

import Vue from 'vue' import Vuex from 'vuex' import state from './state.js' import * as getters from './getters' import mutations from './mutations' import createLogger from 'vuex/dist/logger'Vue.use(Vuex)const debug = process.env.NODE_ENV !== 'production'export default new Vuex.Store({state,getters,mutations,plugins: debug ? [createLogger()] : [] })

現(xiàn)在，構(gòu)造函數(shù)中已經(jīng)傳入了 mutations，接下來，就是在組件中使用 mutations（這里的第四個(gè)選項(xiàng) plugins 并不影響 mutation 的功能，用途是在控制臺(tái)打印 Vuex 操作的信息）.

TodoList 組件中，我們?cè)凇疤砑邮马?xiàng)”這一動(dòng)作提交 mutation, 改變 state. 組件內(nèi)的代碼如下：

// todo-list.vueimport { mapGetters, mapMutations } from 'vuex'export default {...methods: {...addItem () {let itemText = window.prompt('請(qǐng)輸入要添加的事項(xiàng)：')if (itemText) {let list = this.todoList.slice();list.push({text: itemText,done: false,checked: false})this.setTodoList(list)}}......mapMutations({setTodoList: 'SET_TODO_LIST'})}}

接下來就去 todo 里面添加一個(gè)條目。如圖，添加了一個(gè) coding 事項(xiàng)：

可在 vue 的 devtool 觀察到如下結(jié)果：

可以看到 mutation 的 payload 以及 type 信息。 再來觀察 Vuex 的 createLogger 插件在控制臺(tái)輸出的信息：

可以看到，這里進(jìn)行了一次 SET_TODO_LIST 的 mutation 操作。從 prev state可以知道 ，操作前， todoList 只有三個(gè)條目。進(jìn)行 SET_TODO_LIST 操作時(shí)，傳入的荷載為四個(gè)條目的 todoList。操作后，觀察 next state 可知，操作后的 todoList 已經(jīng)有四個(gè)事項(xiàng)。 在線上的 Demo 中可打開控制臺(tái)，添加或者刪除條目，觀察 Vuex 的狀態(tài)變化。

總結(jié)

這里用一個(gè) todo 的例子，簡單介紹了 Vuex 基本的 getters 和 mutatiosn 操作，更多的細(xì)節(jié)，可參考官方文檔 。 Vuex 的應(yīng)用場(chǎng)景是，當(dāng) n 多個(gè)組件之間的相互通信讓人眼花繚亂，那么借助 Vuex 保存多個(gè)組件共享的狀態(tài)，只需操作 state，就能在組件之間同步狀態(tài)。

總結(jié)

以上是生活随笔為你收集整理的computed怎么使用_Vuex 基本使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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