//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']), 使用 this.add 就可以得到 count的值 // 在比如 在state 中获取 count值， 原始写法 this.$store.state.count 获取，使用 mapState后写法：...mapState(['count']) , 就可以使用 this.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("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; */