10分鐘上手使用vuex

2021-10-01 01:28:50 字數 1937 閱讀 6320

很多剛學習vue的人對於全域性變數管理工具vuex都覺得很神秘,今天就用很通俗的大白話協助大家理解一下vuex,作者的vue專案使用vue腳手架搭建的,用腳手架搭建的專案會在src資料夾下有乙個store檔案,開啟store檔案,會看到裡邊有index.js,getters.js,actions.js這幾個js檔案(如果沒有的話就自己建一下)。那麼vuex的核心就在這幾個檔案當中,其實vuex最核心的就四部分:state(全域性變數),mutations(修改全域性變數的方法),actions(用於提交mutations的方法),getters(其他vue元件讀取state變數的中間變數,作者理解,該處相當於匯出了state)。接下來開始上**進行分析。

該部分**定義了全域性變數state,並在mutations中定義了修改state的方法

import vue from

'vue'

// 首先匯入vue

import vuex from

'vuex'

// 匯入vuex

import

*as actions from

'./actions'

// 將actions方法匯入

import

*as getters from

'./getters'

// 將getters匯入

vue.

use(vuex)

// 變數初始化

const state =

// 定義 mutations(即對變數state進行的操作)

const mutations =

,decrement

(state)

}// 建立 store 例項(先不著急看該部分**,該部分就是將全域性變數,mutations,actions,getters整體變成一體化的例項)

export

default

newvuex.store

()

之所以用actions去提交mutations,應該是為了是的mutations中的方法可以非同步操作(mutations中方法為同步執行,該處可能會迷惑,但是其實就是用actions中的方法去呼叫mutations中的方法而已)。

// 用於提交mutations中的increment方法(可根據自己的需要進行傳參,對應的mutaitons中要接收引數)

export

const

increment=(

)=>

// 用於提交mutations中的decrement方法

export

const

decrement=(

)=>

一般getters中的**比較簡單,主要就將全域性變數簡單封裝並匯出,方便其他元件的呼叫。

// 該處將全域性變數state下的count匯出,是的其他vue元件都可以獲取,進行修改

export

const

getcount

= state =>

在main.js中引入vuex(該部分引入在store.js新增也可)

import vue from

'vue'

import vuex from

'vuex'

vue.

use(vuex)

假如我們要在乙個名為test.vue的元件中,對全域性變數state.count進行修改

import

from

'vuex'

import

from

'vuex'

export

default

, methods:}}

<

/script>

vuex簡單使用模板,一分鐘快速上手,新手入門

經過我自己整理過後的vuex的使用模板 專案主要檔案有 testpage 1.vue,testpage 2.vue,testpage 3.vue,store中的index.js testpage 1.vue 使用最直接的方法訪問store testpage 2.vue modules 模組化 以及 ...

pyecharts之五分鐘上手

pyecharts官方教程 因為數學建模和平時分析一些資料都會用到視覺化的東西,就來學學pyecharts。五分鐘快速上手 import pyecharts from pyecharts.charts import bar bar bar bar.add xaxis 襯衫 羊毛衫 雪紡衫 褲子 高跟...

十分鐘快速上手使用MySQL

本文旨在快速學會如何使用mysql進行增刪改查,主要是簡單的sql命令的學習,通用的sql命令適用於各類資料庫操作。本文內容只是最粗淺的使用,如果有精力可以進行系統學習 同時,本人也整理了mysql的基礎知識筆記 關於本專欄,後續還會進行更新,包含但不僅僅包含 各語言如何使用mysql 高效能mys...