vuex 項目結(jié)構(gòu)目錄及一些簡單配置介紹
首先先正經(jīng)的來一段官網(wǎng)的"忠告"：
vuex需要遵守的規(guī)則：
一、應(yīng)用層級的狀態(tài)應(yīng)該集中到單個 store 對象中。
二、提交 mutation 是更改狀態(tài)的唯一方法，并且這個過程是同步的。
三、異步邏輯都應(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ù)的存儲之地
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一樣）:
通過在根實例中注冊 store 選項，該 store 實例會注入到根組件下的所有子組件中，且子組件能通過 this.$store 訪問到。
import store from './store/index'
new Vue({
el: '#app',
router,
store,
...
})
Getter.js 的簡單配置（ store 的計算屬性，接受state為參數(shù)）
export default {
doneTodos: state = >{
return state.todos.filter(todo = >todo.done)
}
}
獲?。辰M件的計算屬性內(nèi)部）：
computed: {
doneTodosCount () {
return this.$store.getters.doneTodosCount
}
}
可傳參 的getter屬性的簡單配置
export default{
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}
獲取（某 組件的計算屬性內(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 項目結(jié)構(gòu)目錄及一些簡單配置介紹，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
elementui的table列超出隱藏tooltip懸浮顯示問題
這篇文章主要介紹了elementui的table列超出隱藏tooltip懸浮顯示問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
vue3+ts+vite打包后靜態(tài)資源404無法加載js和css問題解決辦法
這篇文章主要給大家介紹了關(guān)于vue3+ts+vite打包后靜態(tài)資源404無法加載js和css問題的解決辦法,文中通過代碼以及圖文介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了vxe-table中vxe-grid的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue生成初始化名字相近的變量并放到數(shù)組中的示例代碼
項目上有一個需求,頁面上有50、60個數(shù)據(jù)變量,是依次排序遞增的變量,中間有個別變量用不到,不想把這些變量直接定義在data() { }內(nèi),這篇文章主要介紹了vue生成初始化名字相近的變量并放到數(shù)組中的示例代碼,需要的朋友可以參考下2024-08-08
vue.js實現(xiàn)點擊后動態(tài)添加class及刪除同級class的實現(xiàn)代碼
這篇文章主要介紹了vue.js實現(xiàn)點擊后動態(tài)添加class及刪除同級class的相關(guān)資料,需要的朋友可以參考下2018-04-04
本文為大家介紹Vue中路由的使用方法,包括安裝路由創(chuàng)建路由并導(dǎo)出以及在應(yīng)用實例中使用vue-router的相關(guān)知識,本文結(jié)合實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-02-02
vue的異步數(shù)據(jù)更新機(jī)制與$nextTick用法解讀
這篇文章主要介紹了vue的異步數(shù)據(jù)更新機(jī)制與$nextTick用法解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
本篇文章主要介紹了VUE中v-model和v-for指令詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了vue2項目之swiper.js 的使用,需要的朋友可以參考下2023-12-12
vue中國城市選擇器的使用教程(element-china-area-data)
這篇文章主要給大家介紹了關(guān)于vue中國城市選擇器使用(element-china-area-data)的相關(guān)資料,使用element-china-area-data插件可以非常方便地實現(xiàn)省市縣三級聯(lián)動選擇器,需要的朋友可以參考下2023-11-11