vuex 理解

//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; */