VUEX的简单使用之一

简单从vuex中传递一个值并进行运算
1.对数字1进行++运算
index.js

 state: {count: 1,},mutations: {//进行同步操作  actions是异步操作addcount: function (state, num) {state.count += num;},

Home.vue
在body中写入

<p>{{ $store.state.count }}<p>
<button @click="changeCount">修改数量</button>

在Script中写入

methods: {changeCount: function () {this.$store.commit("addcount", 1);},},

2.对数字进行计算,每个数字乘以100
可以在index.js中添加

 getters: {//相当于计算属性total: function (state) {return state.count * 100;},},

在Home.vue中修改

{{ $store.state.count }}

商品的总价{{ $store.getters.total }}

  methods: {changeCount: function () {this.$store.commit("addcount", 3);},},

效果图:在这里插入图片描述

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-BlogPHP 1.7.3

Copyright www.122dh.com Rights Reserved.