vueX使用

 

 

<template>
  <div class="vuex">

    <div>{{mes}}</div>

    <hr />
    <!-- 得到state里数据的方法 -->

    <!-- 直接赋值 -->
    <h3>{{$store.state.count}}</h3>

    <!-- 1.通过computed的计算属性直接赋值 -->
    <!-- <p>1/通过computed的计算属性直接赋值{{count}}</p> -->

    <!-- 2.通过mapState的对象来赋值 -->

    <!-- <p>2/通过mapState的对象来赋值{{count}}</p> -->

    <!-- 3.通过mapState的数组来赋值 -->
    <!-- <p>3/通过mapState的数组来赋值{{count}}</p> -->


    <!-- 改变state里数据的方法 -->

    <!-- <div>
      <p>直接使用this.store.commit提交</p>
      <button @click="$store.commit('addCount')">+</button>
      <button @click="$store.commit('reduce')">-</button>
    </div> -->

    <!-- <div>
      <p>模板获取Mutations方法</p>
      <button @click="addCount1">+</button>
      <button @click="reduce1">-</button>
    </div> -->

    <!-- js中直接使用this.SOME_MUTATION()调用 -->
    <button @click="SOME_MUTATION()">映射方法使用</button>


    <router-link tag="li" to="/">
      跳转到hellow查看state里面的count是否改变
    </router-link>

  </div>
</template>

<script>
  import {mapState} from "vuex";
  import {mapMutations} from "vuex";

  // 通过computed的计算属性直接赋值
  // 通过mapState的对象来赋值
  // 通过mapState的数组来赋值

  export default {
    name: "vuex",
    data() {
      return {
        mes: "我是vuex页面"
      };
    },
    components: {},
    created() {
      console.log(this.$store.state.count);
    },
    mounted() {},

    // 1.模板获取Mutations方法
    // methods: mapMutations(["addCount", "reduce"]),

    methods: {
      // 2.模板获取Mutations方法

      // ...mapMutations({
      //   addCount1: "addCount", // 将this.add10() 映射为 this.$store.commit('add')
      //   reduce1: "reduce" //其实就是方法又命名了一下
      // }),

      // 3.模板获取Mutations方法

      ...mapMutations(["SOME_MUTATION"])
    },

    // 1.通过computed的计算属性直接赋值
    // computed: {
    //   count() {
    //     return this.$store.state.count;
    //   }
    // },

    // 2.通过mapState的对象来赋值
    // computed: mapState({
    //   count: state => state.count //理解为传入state对象，修改state.count属性
    // }),

    // 3.通过mapState的数组来赋值
    computed: mapState(["count"])
  };

</script>