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

<template> <div> <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 { // 得到计算后的值 computed:mapGetters(['count','getOdd']), // 发生点击事件触发不同函数 methods:mapActions(['add','decrease','oddAdd']) } </script>

GitHub: https://github.com/wmui

总结

以上所述是小编给大家介绍的vuex的简单使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/ppjpd.html