Vue之共享V之简单入门(040)
2021/11/2 23:12:46
本文主要是介绍Vue之共享V之简单入门(040),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
Vue之共享V之简单入门
一、项目结构
二、store文件下index.js
import Vue from "vue" import Vuex from "vuex" Vue.use(Vuex) const actions = { //定义奇数再加法 xPlusBySumOdd(context, value) { if (this.state.sum % 2) context.commit("XPlus", value) }, //定义等一会儿再加法 xPlusWait(context, value) { setTimeout(()=>{ context.commit("XPlus", value) },500) }, } const mutations = { //定义加法实现 XPlus(state, value) { return state.sum += value; }, //定义减法实现 XSubtract(state, value) { return state.sum -= value; } } const state = { sum: 0 } export default new Vuex.Store({ actions, mutations, state })
三、main.js
import Vue from 'vue' import App from './App.vue' import store from './store' Vue.config.productionTip = false new Vue({ store, render: h => h(App), }).$mount('#app')
四、组件count.vue
<template> <div> <h1>{{ $store.state.sum }}</h1> <select v-model.number="n"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <button @click="plus">+</button> <button @click="subtract">-</button> <button @click="plusBySumOdd">和奇数再加</button> <button @click="plusWait">等一会儿再加</button> </div> </template> <script> export default { name: "Count", data() { return { n: 0 } }, methods: { //定义加法 plus() { this.$store.commit("XPlus", this.n) }, //定义减法 subtract() { this.$store.commit("XSubtract", this.n) }, //定义和为奇数再加法 plusBySumOdd() { this.$store.dispatch("xPlusBySumOdd", this.n) }, //定义等等再加法 plusWait() { this.$store.dispatch("xPlusWait", this.n) } } } </script>
五、APP代码
<template> <div id="app"> <count></count> </div> </template> <script> import Count from "./components/Count"; export default { name: 'App', components: { Count } } </script>
六、效果图
七、总结
如果没有复杂业务逻辑或异步可以直接调用mutation中方法。
this.$store.commit("XPlus", this.n)
反之需调用action 中的方法
this.$store.dispatch("xPlusBySumOdd", this.n)
这篇关于Vue之共享V之简单入门(040)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist
- 2024-03-11icons for vue
- 2024-03-07breadcrumbs react js
- 2024-03-06react login page example
- 2024-03-06react router uselocation
- 2024-03-04postgres jsonb_set