nuxt框架中對(duì)vuex進(jìn)行模塊化設(shè)置的實(shí)現(xiàn)方法
1.Nuxt里怎么使用vuex?
Nuxt.js 內(nèi)置引用了 vuex 模塊,所以不需要額外安裝。
Nuxt.js 會(huì)嘗試找到應(yīng)用根目錄下的 store 目錄,如果該目錄存在,它將做以下的事情:
1.1> 引用 vuex 模塊
1.2> 將 vuex 模塊 加到 vendors 構(gòu)建配置中去
1.3> 設(shè)置 Vue 根實(shí)例的 store 配置項(xiàng)
Nuxt.js 支持兩種使用 store 的方式:
普通方式: store/index.js 返回一個(gè) Vuex.Store 實(shí)例
模塊方式: store 目錄下的每個(gè).js 文件會(huì)被轉(zhuǎn)換成為狀態(tài)樹指定命名的子模塊 (當(dāng)然,index 是根模塊)
2.Nuxt中怎么對(duì)vuex進(jìn)行模塊化設(shè)置?
2.1> 例如 -- 設(shè)置index.js為根模塊,child1.js與child2.js兩個(gè)子模塊
2.2> 在store/index.js 中不需要返回 Vuex.Store 實(shí)例,可以直接將 state、mutations 和 actions 暴露出來:
(以下為例:index中存儲(chǔ)商品總價(jià),child1中存儲(chǔ)單價(jià),child2中存放數(shù)量)
export const state = () =>({ totalPrice:0, }); export const mutations = { totalPrice (state) { //總價(jià) // state.totalPrice = state.num*state.price 錯(cuò)誤方式:使用子模塊的state,應(yīng)該在變量名前加上文件名,如下 state.totalPrice = state.child1.price*state.child2.num //正確方式 } };
子模塊中同樣直接將 state、mutations 和 actions 暴露出來:
child1.js1
export const state = () =>({ price:10, //單價(jià) }); export const mutations = { getPrice(state,price) { state.price= price } };
child2.js2
export const state = () =>({ num:5, }); export const mutations = { getNum(state,num) { //數(shù)量 state.num= num } };
3.在vue文件中獲取vuex的數(shù)據(jù),調(diào)用mutation中的方法修改數(shù)據(jù)
<script> export default { name : 'test', data() { return { totalPrice:this.$store.state.totalPrice, //取index.js(根模塊)中的值 num:this.$store.state.child2.num, //取子模塊中的值 price:this.$store.state.child1.price, //取子模塊中的值 } }, } </script>
methods: { setTotalPrice(){ this.$store.commit('totalPrice') }, setNum(){ this.$store.commit('child2/getNum',參數(shù)) //使用子模塊的mutation中的方法 this.$store.commit(‘文件名/方法名',參數(shù)) }, setPrice(){ this.$store.commit('child1/getPrice',參數(shù)) //使用子模塊的mutation中的方法 }, },
補(bǔ)充: 使用子模塊的action: this.$store.dispatch(‘文件名/變量名')
參考鏈接:
http://www.dbjr.com.cn/article/169502.htm
http://www.dbjr.com.cn/article/169504.htm
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue2使用wangeditor實(shí)現(xiàn)手寫輸入功能
這篇文章主要為大家詳細(xì)介紹了vue2如何使用wangeditor實(shí)現(xiàn)手寫輸入功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以了解下2023-12-12Vue +WebSocket + WaveSurferJS 實(shí)現(xiàn)H5聊天對(duì)話交互的實(shí)例
這篇文章主要介紹了Vue +WebSocket + WaveSurferJS 實(shí)現(xiàn)H5聊天對(duì)話交互的實(shí)例,幫助大家更好的理解和學(xué)習(xí)vue,感興趣的朋友可以了解下2020-11-11html中創(chuàng)建并調(diào)用vue組件的幾種方法匯總
這篇文章主要介紹了html中創(chuàng)建并調(diào)用vue組件的幾種方法匯總,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下2020-11-11vueCli?4.x升級(jí)5.x報(bào)錯(cuò):Progress?Plugin?Invalid?Options的解決方法
本文主要介紹了vueCli?4.x升級(jí)5.x報(bào)錯(cuò):Progress?Plugin?Invalid?Options的解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01vue?parseHTML?函數(shù)源碼解析AST基本形成
這篇文章主要為大家介紹了vue?parseHTML?函數(shù)源碼解析AST基本形成,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07vue-cli腳手架搭建的項(xiàng)目去除eslint驗(yàn)證的方法
今天小編就為大家分享一篇vue-cli腳手架搭建的項(xiàng)目去除eslint驗(yàn)證的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09Vue + Element UI 實(shí)現(xiàn)權(quán)限管理系統(tǒng)之菜單功能實(shí)現(xiàn)代碼
菜單管理是一個(gè)對(duì)菜單樹結(jié)構(gòu)的增刪改查操作,這篇文章主要介紹了Vue + Element UI 實(shí)現(xiàn)權(quán)限管理系統(tǒng)之菜單功能實(shí)現(xiàn)代碼,需要的朋友可以參考下2022-02-02