vuex 項(xiàng)目結(jié)構(gòu)目錄及一些簡單配置介紹
首先先正經(jīng)的來一段官網(wǎng)的"忠告"：
vuex需要遵守的規(guī)則：
一、應(yīng)用層級(jí)的狀態(tài)應(yīng)該集中到單個(gè) store 對(duì)象中。
二、提交 mutation 是更改狀態(tài)的唯一方法，并且這個(gè)過程是同步的。
三、異步邏輯都應(yīng)該封裝到 action 里面。
文件目錄結(jié)構(gòu)
文件之間的關(guān)系：
store文件夾 - 存放vuex的系列文件
store.js - 引入vuex，設(shè)置state狀態(tài)數(shù)據(jù)，引入getter、mutation和action
getter.js - 獲取store內(nèi)的狀態(tài)
mutation.js - 更改store中狀態(tài)用的函數(shù)的存儲(chǔ)之地
action.js - 提交mutation以達(dá)到委婉地修改state狀態(tài)，可異步操作
簡單而又普通的寫法
store.js文件：
import Vue from 'vue'
import Vuex from 'vuex'
import actions from './actions'
import mutations from './mutations'
Vue.use(Vuex)
const state = {
a: '初始值',
b: 'balabala...'
}
export default new Vuex.Store({
state,
actions,
mutations
})
main.js文件中（從根組件注入store，就像注入router一樣）:
通過在根實(shí)例中注冊(cè) store 選項(xiàng)，該 store 實(shí)例會(huì)注入到根組件下的所有子組件中，且子組件能通過 this.$store 訪問到。
import store from './store/index'
new Vue({
el: '#app',
router,
store,
...
})
Getter.js 的簡單配置（ store 的計(jì)算屬性，接受state為參數(shù)）
export default {
doneTodos: state = >{
return state.todos.filter(todo = >todo.done)
}
}
獲?。辰M件的計(jì)算屬性內(nèi)部）：
computed: {
doneTodosCount () {
return this.$store.getters.doneTodosCount
}
}
可傳參 的getter屬性的簡單配置
export default{
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}
獲?。?組件的計(jì)算屬性內(nèi)部 ）：
computed: {
getTodoById() {
return this.$store.getters.getTodoById(‘參數(shù)')
}
}
mutation.js簡單配置：
export default {
increment(state) {
//變更狀態(tài)
state.count++
}
}
觸發(fā)（組件中）
this.$store.commit(state,payload)
actions.js簡單配置：
export default{
action (context) {
//異步操作
setTimeout（（）=>{
//變更狀態(tài)
context.commit('mutationFunName'，value)
}）
}
}
觸發(fā)（組件的）
this.$store.dispatch('mutationFunctionName')
2018-04-07 18:13:34
總結(jié)
以上所述是小編給大家介紹的vuex 項(xiàng)目結(jié)構(gòu)目錄及一些簡單配置介紹，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
基于ElementUI中Table嵌套實(shí)現(xiàn)多選的示例代碼
這篇文章主要介紹了基于ElementUI中Table嵌套實(shí)現(xiàn)多選的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
詳解vuex中action何時(shí)完成以及如何正確調(diào)用dispatch的思考
這篇文章主要介紹了詳解vuex中action何時(shí)完成以及如何正確調(diào)用dispatch的思考，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了用vue和node寫的簡易購物車實(shí)現(xiàn),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
Vue數(shù)據(jù)驅(qū)動(dòng)表單渲染,輕松搞定form表單
這篇文章主要介紹了Vue數(shù)據(jù)驅(qū)動(dòng)表單渲染,輕松搞定form表單,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
Element中select多數(shù)據(jù)加載優(yōu)化的實(shí)現(xiàn)
本文主要介紹了Element中select多數(shù)據(jù)加載優(yōu)化的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了在Vue中使用Immutable.js的步驟，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
vue3+ts如何通過lodash實(shí)現(xiàn)防抖節(jié)流詳解
loadsh是一個(gè)工具庫，我們通常使用loadsh的debounce函數(shù)處理防抖,下面這篇文章主要給大家介紹了關(guān)于vue3+ts如何通過lodash實(shí)現(xiàn)防抖節(jié)流的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
vue 通過下拉框組件學(xué)習(xí)vue中的父子通訊
這篇文章主要介紹了vue 通過下拉框組件學(xué)習(xí)vue中的父子通訊的相關(guān)知識(shí),文中涉及到了父組件，子組件的實(shí)現(xiàn)代碼，需要的朋友可以參考下2017-12-12
這篇文章主要介紹了Vue組件間數(shù)據(jù)傳遞的方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
Vue 中 filter 與 computed 的區(qū)別與用法解析
這篇文章主要介紹了Vue 中 filter 與 computed 的區(qū)別與用法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11