首页 技术 正文
技术 2022年11月23日
0 收藏 510 点赞 4,011 浏览 2522 个字

在组件中使用 this.$store.dispatch('xxx') 分发 action,或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用(需要先在根节点注入 store).

import Vue from 'vue';
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App';
import router from './router';
import Vuex from 'vuex';Vue.config.productionTip = false;
Vue.use(Vuex);
Vue.use(Element)//vuex的配置
//注意Store是大写
const store = new Vuex.Store({
//数据保存
state: {
show: false,
count: 0,
list: [1, 5, 8, 10, 30, 50]
},
mutations: {
increase(state, n = 1) {
state.count += n;
},
decrease(state, n = 1) {
state.count -= n;
},
switch_dialog(state) { // 这里的state对应着上面这个state
state.show = state.show ? false : true
// 你还可以在这里执行其他的操作改变state
}
},
getters: {
filteredList: state => {
return state.list.filter(item => item < 31);
}
},
actions: {
asyncDecrease({commit }) {
commit(
'decrease',5);
},

switch_dialog123(context) { // 这里的context和我们使用的$store拥有相同的对象和方法
context.commit('switch_dialog')
// 你还可以在这里触发其他的mutations方法
}
}
});/* eslint-disable no-new */
new Vue({
el: '#app',
router,
//使用vuex
store: store,
render: h => h(App),
});
<template>
<div>
{{count}}
<button @click="handleIncrease">+5</button>
<button @click="handleDecrease">-5</button>
<button @click="handleAsyncDecrease">异步-5</button>
<button @click="handleRouter">跳转到 HelloWorld3</button>
<button @click="showRouter">展示路由</button>
</div>
</template><script>
import { mapState } from 'vuex'
import { mapGetters } from 'vuex'
import { mapMutations } from 'vuex'
import { mapActions } from 'vuex'

export default {
name: 'HelloWorld2',
computed: {
// count(){
// return this.$store.state.count;
// },
// filteredList() {
// return this.$store.getters.filteredList;
// },
...mapState({
count: state => state.count
}),
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'filteredList'
])
},
methods: {
handleIncrease() {
// this.$store.commit('increase', 5);
this.increase();
},
handleDecrease() {
this.$store.commit('decrease', 5);
},
handleAsyncDecrease() {
//调用方式一
// this.$store.dispatch('asyncDecrease');
//调用方式二
this
.asyncDecrease()
},
handleRouter() {
this.$router.push('/HelloWorld3');
},
showRouter() {
console.log(this.$router);
console.log(this.$router.push);
},
//mapMutations 使用方法一
// ...mapMutations([
// 'increase', // 将 `this.increase()` 映射为 `this.$store.commit('increase')`
// ]),
//mapMutations 使用方法二
...mapMutations({
increase: 'increase' // 将 `this.increase()` 映射为 `this.$store.commit('increase')`
}),
//mapActions 使用方法一
// ...mapActions([
// 'asyncDecrease' // 将 `this.asyncDecrease()` 映射为 `this.$store.dispatch('asyncDecrease')`
// ]),
//mapActions 使用方法二
...mapActions({
asyncDecrease: 'asyncDecrease' // 将 `this.asyncDecrease()` 映射为 `this.$store.dispatch('asyncDecrease')`
}),
}
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,723
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,328
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,155
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:5,974
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,619
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,637