首页 > 代码库 > vuex的简单使用
vuex的简单使用
使用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>
vuex的简单使用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。