//1.state //state:用来存放组件之间共享的数据。他跟组件的data选项类似,只不过data选项是用来存放组件的私有数据。 //2.getters //getters:有时候,我们需要对state的数据进行筛选,过滤。这些操作都是在组件的计算属性进行的。如果多个组件需要用到筛选后的数据, //那我们就必须到处重复写该计算属性函数;或者将其提取到一个公共的工具函数中,并将公共函数多处导入 - 两者都不太理想。 //如果把数据筛选完在传到计算属性里就不用那么麻烦了,getters就是干这个的,你可以把getters看成是store的计算属性。 //getters下的函数接收接收state作为第一个参数。那么,组件是如何获取经过getters过滤的数据呢? 过滤的数据会存放到$store.getters对象中。 //3.mutations //mutations:前面讲到的都是如何获取state的数据,那如何把数据存储到state中呢?在 Vuex store 中, //实际改变 状态(state) 的唯一方式是通过 提交(commit) 一个 mutation。 //mutations下的函数接收state作为参数,接收一个叫做payload(载荷)的东东作为第二个参数, //这个东东是用来记录开发者使用该函数的一些信息,比如说提交了什么,提交的东西是用来干什么的,包含多个字段, //所以载荷一般是对象(其实这个东西跟git的commit很类似)还有一点需要注意:mutations方法必须是同步方法! //4.actions //actions:既然mutations只能处理同步函数,我大js全靠‘异步回调’吃饭,怎么能没有异步,于是actions出现了... //actions和mutations的区别 //(1).Actions 提交的是 mutations,而不是直接变更状态。也就是说,actions会通过mutations,让mutations帮他提交数据的变更。 //(2).Action 可以包含任意异步操作。ajax、setTimeout、setInterval不在话下 //总结 //更改state的数据并显示在组件中,有几个步骤: //1. 在mutations选项里,注册函数 函数里面装逻辑代码。 //2.在组件里,this.$store.commit('change',payload) 注意:提交的函数名要一一对应 //3.触发函数,state就会相应更改 //4.在组件的计算属性里 this.$store.state 获取你想要得到的数据 //5 action 是异步执行-调用 mutations.js 中的方法-- mutations是同步的 //各个类型的 API各司其职,mutation 只管存,你给我(dispatch)我就存;action只管中间处理,处理完我就给你,你怎么存我不管; //Getter 我只管取,我不改的。 action放在了 methods 里面,说明我们应该把它当成函数来用(讲道理,钩子函数也应该可以的) //mutation是写在store里面的,这说明,它就是个半成品,中间量,我们不应该在外面去操作它。 //getter写在了 computed 里面,这说明虽然 getter我们写的是函数,但是我们应该把它当成计算属性来用。 // mapState, mapGetters, mapMutations, mapActions // 在组件中 只是映射对应的值,做简写而已,比如 在 getters.js 中 通过 add方法获取 count 的值, 原始方法 :this.$store.getters.add, // mapGetters 简写后 ...mapGetters(['add']), 直接在组件中使用 add 或者 this.add 就可以得到 count的值 // 在比如 在state 中获取 count值, 原始写法 this.$store.state.count 获取,使用 mapState后写法:...mapState(['count']) , 直接就可以使用 count 获取值 // mapState、mapGetters 放在 computed 组件计算属性当中 // mapActions、mapMutations 放在 methods 中 // mapActions 做异步处理的, mapMutations 做同步状态处理,看情况使用即可
代码:
<template> <div class="hello"> <img src='../components/public/img/logo.png'/> <h1>路由二 vuex练习</h1> <button @click='back'>返回</button> <button @click='add'>+1</button> <button @click='minus'>-1</button> <input type="text" v-model="count"/> <input type="text" v-model="child"/> <span>{{ countAnother }}</span> <Test v-bind:data='test'></Test> </div> </template> <script> import {mapActions, mapState, mapMutations, mapGetters} from 'vuex' import './index.css'; import Test from './test.vue'; const Hellos = { name: 'hellos', components:{ //组件调用 Test }, data () { return { msg: '<h1>v-html指令输入html内容</h1>', class1: false, child:'' } }, computed:{ ...mapState(['count']), ...mapGetters(['add1']), countAnother: function () { // 获取state return this.$store.state.count; } }, methods:{ add(){ console.log(this); // this.ADD(this.$store.state); this.$store.dispatch(this.add); }, minus(){ this.$store.dispatch("minus"); }, back: function(){ this.$router.back(); //或者下面 }, back1: function(){ window.history.back(); }, test(num){ this.child = num; }, // ...mapActions(['add']) // ...mapMutations(['ADD']) } } export default Hellos; </script>
vuex:
/* const store = new Vuex.Store({ state: { count: 10, numb: 10086 }, getters: { add: (state, getter) => { state.count = getter.add; return state.count; }, }, mutations: { ADD:function(state){ state.count ++; }, MINUS:function(state){ state.count --; } }, actions: { add({commit}) { commit("ADD"); }, minus({commit}){ commit("MINUS"); } } }); export default store; */