action 在 vuex 中用于异步 commit 的发送
store.js
import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); const store = new Vuex.Store({ //这里的state必须是JSON,是一个对象。 state: { count: 0 , //这里就是初始值的罗列, student : [ {"name" : "小1" , "sex" : "男" }, {"name" : "小2" , "sex" : "女" }, {"name" : "小3" , "sex" : "男" }, {"name" : "小4" , "sex" : "女" } ] }, //突变,罗列所有可能改变state的方法 mutations: { //没有所谓的大写字母的Type了,就是一个一个函数 add (state , n ) { state.count += n; }, minus (state) { state.count--; } }, actions : { add(context,payload){ $.get("api.txt",function(data){ context.commit(‘add‘,Number(data)); }); } }, getters : { nansheng : state => { return state.student.filter((item)=>{ return item.sex == "男"; }) } } }); export default store;
.vue文件
<style scopoed> </style> <template> <div> 我是子组件 <h1> <button v-on:click="minusnandler">减少</button> {{count}} <button v-on:click="addhandler">增加</button> </h1> <h1> {{nansheng}} </h1> </div> </template> <script> export default { data(){ return { m : 6, n : 0 } }, computed : { count(){ return this.$store.state.count; }, nansheng (){ return this.$store.getters.nansheng } }, methods : { addhandler(){ this.$store.dispatch("add"); //添加的数字写在文本文件中了,是异步读取的,所以不能直接commit }, minusnandler(){ this.$store.commit("minus"); } } } </script>
原文:https://www.cnblogs.com/caoleyun/p/12693173.html