vuex是一个专门为vue.js设计的集中式状态管理架构。这篇文章主要介绍了vuex的简单使用,需要的朋友可以参考下
什么是Vuex？
vuex是一个专门为vue.js设计的集中式状态管理架构。状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。
使用vuex进行组件间数据的管理
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-- } }; // 事件触发后的逻辑操作 // 参数为事件函数 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
<div id="app"> <button>add</button><button>decrease</button><button><div>本文来源gaodai^.ma#com搞#代!码网</div>oddAdd</button><div>{{count}}</div><div>{{getOdd}}</div></div>
GitHub: https://github.com/wmui
总结
以上就是vuex的简单使用教程的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vuex的简单使用教程
转载请注明原文链接：vuex的简单使用教程
