您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“vuex如何使用”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vuex如何使用”這篇文章吧。
什么是Vuex?
vuex是一個(gè)專門為vue.js設(shè)計(jì)的集中式狀態(tài)管理架構(gòu)。狀態(tài)?我把它理解為在data中的屬性需要共享給其他vue組件使用的部分,就叫做狀態(tài)。簡(jiǎn)單的說(shuō)就是data中需要共用的屬性。
使用vuex進(jìn)行組件間數(shù)據(jù)的管理
npm i vuex -S
main.js
import Vue from 'vue' import App from './App.vue' import store from './store.js' new Vue({ store, el: '#app', render: h => h(App) })
store.js
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 這里定義初始值 let state = { count:10 }; const mutations = { add(context){ context.count++ }, decrease(context){ context.count-- } }; // 事件觸發(fā)后的邏輯操作 // 參數(shù)為事件函數(shù) const actions = { add(add){ add.commit('add') }, decrease(decrease){ decrease.commit('decrease') }, oddAdd({commit,state}){ if (state.count % 2 === 0) { commit('add') } } }; // 返回改變后的數(shù)值 const getters = { count(context){ return context.count }, getOdd(context) { return context.count % 2 === 0 ? '偶數(shù)' : '奇數(shù)' } }; export default new Vuex.Store({ state, mutations, actions, getters })
App.vue
<template> <div id="app"> <button @click="add">add</button> <button @click="decrease">decrease</button> <button @click="oddAdd">oddAdd</button> <div>{{count}}</div> <div>{{getOdd}}</div> </div> </template> <script> import {mapGetters,mapActions} from 'vuex' export default { // 得到計(jì)算后的值 computed:mapGetters(['count','getOdd']), // 發(fā)生點(diǎn)擊事件觸發(fā)不同函數(shù) methods:mapActions(['add','decrease','oddAdd']) } </script>
以上是“vuex如何使用”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。