簡單介紹

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

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。

怎么理解呢？就拿我兩位數的資產的銀行卡來說吧，基本的存錢取錢，就是狀態管理。

怎么用

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

安裝

npm install vuex --save

初始化

首先需要在項目的 src 目錄下，新建一個 Vuex 的目錄 store，結構如下：

初始化 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 是理所當然的，除此之外執行 Vue.use(Vuex) 來全局安裝 Vuex. Vuex.Store 即 Vuex 的構造函數，來初始化 Vuex 實例。這里可以看到，我們在 Vuex 構造函數中傳入了一個 state 選項，那這個 state 是什么呢？

State

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

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

這里聲明了一個 state, 里面有一個 todoList 的字段，todoList 的數據是去 localStorage 里面拿的，如果沒有，就是一個空數組。 好了，現在我們的狀態已經有了，接下來就是要在組件里面，獲取這個 state, 也就是讓我們的組件拿到這里的數據。

Getter

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

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

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

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

調用的時候，和普通的計算屬性別無二致:

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

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

當然，不管是標記一個事項為完成，還是添加刪除事項，todoList 都會產生變化，也就是 state 會變化。那我們怎么去改變 state 呢？這就需要 mutation 的幫助 。

Mutation

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

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

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

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

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

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()] : [] })

現在，構造函數中已經傳入了 mutations，接下來，就是在組件中使用 mutations（這里的第四個選項 plugins 并不影響 mutation 的功能，用途是在控制臺打印 Vuex 操作的信息）.

TodoList 組件中，我們在“添加事項”這一動作提交 mutation, 改變 state. 組件內的代碼如下：

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

接下來就去 todo 里面添加一個條目。如圖，添加了一個 coding 事項：

可在 vue 的 devtool 觀察到如下結果：

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

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

總結

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

總結

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

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