vuex的简单使用教程

前端之家收集整理的这篇文章主要介绍了vuex的简单使用教程前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

什么是Vuex?

vuex是一个专门为vue.js设计的集中式状态管理架构。状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态。简单的说就是data中需要共用的属性

使用vuex进行组件间数据的管理

npm i vuex -S

main.js

new Vue({
store,el: '#app',render: h => h(App)
})

store.js

函数 const actions = { add(add){ add.commit('add') },decrease(decrease){ decrease.commit('decrease') },oddAdd({commit,state}){ if (state.count % 2 === 0) { commit('add') } } }; // 返回改变后的数值 const getters = { count(context){ return context.count },getOdd(context) { return context.count % 2 === 0 ? '偶数' : '奇数' } }; export default new Vuex.Store({ state,mutations,actions,getters })

App.vue

GitHub: nofollow" href="https://github.com/wmui">https://github.com/wmui

总结

分享给好友!感谢支持

原文链接:https://www.f2er.com/vue/33897.html

猜你在找的Vue相关文章