vuex 基本語法

2022-02-22 10:08:00 字數 1169 閱讀 5082

vuex 的核心概念   1 、state (常用);2、getters ;3、mutations(常用);4、actions ;5、modules;

1。state是唯一的資料來源,單一的狀態樹

const couter=}

`,computed:

}}2。通過getters可以派生出新的狀態 如:

const store=new

vuex.store(,]},

getters:

}})3。更改vuex的store中的狀態的唯一方法是提交mutation

const store=new

vuex.store(,

mutations:

}})//呼叫

store.commit('increment')

4。action提交的是mutation,而不是直接改變狀態,action可以包含任意的非同步操作

const store=new

vuex.store(,

mutations:

},actions:

}})5。面對複雜的應用程式,當管理的狀態比較多時,我們需要將vuex的store物件分割成模組(modules)

const modulea=,

mutations:,

actions:,

getters:

}const moduleb=,

mutations:,

actions:

}const stote=new

vuex.store(

}) 專案結構

|——index.html

|——main.js

|——api

|_ ... //

抽取出api請求

|——components

|_ ...

|——store

|-index.js //

我們組裝模組並匯出store的地方

|-actions.js //

根級別的actions

|-mutations.js //

根級別的mutations

|_modules

|-cart.js //

/購物車模組

|_products.js //

/產品模組

Vuex語法解析

安裝vuex cnpm i d vuex 五種屬性用法 import vuex from vuex import vue from vue vue.use vuex export default new vuex.store mutations store.commit increment stor...

VUEX基本介紹

一 什麼是vuex?vuex是乙個專為vue.js應用程式開發的狀態管理模式。當我們構建乙個中大型的單頁面應用程式時,vuex可以更好的幫助我們在元件外部統一管理狀態。二 vuex的五個核心概念 state getters mutations actions modules 其中state和muta...

vuex基本使用

使用vuex 1.安裝vuex,搭建手腳架 npm i vuex s2.建立乙個store資料夾,在該資料夾中建立乙個index.js檔案 2.1引入相應的檔案 import vue from vue import vuex from vuex 2.2使用vuex vue.use vuex 3.建立...