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

GitHub: https://github.com/wmui

总结

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