vuex 应用

1.vuex是什么？

   vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。

2.使用vuex的好处:

  (1)能够在vuex集中管理共享的数据，易于开发和维护；

  (2)能够高效的实现组件之间的数据共享，提高开发效率；

  (3)存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步。

3.Vuex的五个属性

　　state, getters, mutations, actions, modules。

1. ）state：
   vuex的基本数据,用来存储变量。

2. ）getter：
   从基本数据(state)派生的数据,相当于store的计算属性;getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。获取geeters的方法：

   $store.getters.computedCcount或者

   computed:{
           ...mapGetters(['computedCcount'])
       }

3. ）mutation：
   提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
   回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。

4. ）action：
   和mutation的功能大致相同,不同之处在于:
   ① Action 提交的是 mutation,而不是直接变更状态;
   ② Action 可以包含任意异步操作。

5. ）modules：
   模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,管理更为方便。

4.案例：计数器

Addition与Subtraction组件分别用不同的方法获取state中数据，以及触发mutation，action函数。

store.js文件：

import Vue from 'vue'
import Vuex from 'vuex';
Vue.use(Vuex);

var state={//要设置的全局访问的state对象
    count: 1
    //要设置的初始属性值
  };
  //改变state里面的数据
  var mutations = {
      changeCount(state){
          state.count++;
      },
      changeCountN(state,step){
        state.count = state.count+step;
    },
      substration(state){
        state.count--;
    }
  }
  //改变state里面的数据之后出发的方法
  var getters = {
        computedCcount (state) {
            return "当前值为"+state.count
        }
  }

  var actions={
    asyncAdd(context){
        //asyncAdd(context,step){ //传参
        setTimeout(() => {
            //不能直接修改state中的数据 必须通过context.commit触发某个mutation
            context.commit('changeCount');
            //context.commit('changeCountN',step);
        }, 1000);
    },
    asyncSub(context){
      setTimeout(() => {
          context.commit('substration');
      }, 1000);
  },
  }

const store = new Vuex.Store({
    state,
    mutations,
    getters,
    actions

});
 
export default store;

<template>
    <div>
       当前值为： {{$store.state.count}}
       <button @click="add">+1button>
        <button @click="asyncAdd">异步+1button>
    div>
template>

<script>
import store from '../vuex/store.js'
export default {
    data(){
        return{

        }
    },
    store,
    methods:{
        add(){
             this.$store.commit('changeCount');
             //可传入参数 对应的方法也许要做修改
             //this.$store.commit('changeCount'，2);
        },
        asyncAdd(){
            //触发actions
            this.$store.dispatch('asyncAdd');
            //  this.$store.dispatch('asyncAdd' 2); 传参
        }
    }
}
script>

<template>
    <div>
        当前值为： {{count}}
       <button @click="sub">-1button>
       <button @click="asyncSub">异步-1button>
    div>
template>

<script>
import store from '../vuex/store.js'//引入store
import { mapState,mapMutations,mapActions}  from 'vuex'
export default {
    data(){
        return{

        }
    },
    store,
    computed:{
        //获取state的另一种方法
        ...mapState(['count'])
    },
    methods:{
        //触发mutation action函数的方法
        ...mapMutations(['substration']),
        ...mapActions(['asyncSub']),
        sub(){
           this.substration();
        }
    }
}
script>

<template>
    <div>
        <my-addition>my-addition>
        <p>-------------------p>
        <my-subtraction>my-subtraction>
    div>
template>

<script>
import Addition from "./Addition.vue"
import Subtraction from "./Subtraction.vue"
export default {
    data(){
        return{

        }
    },
    components:{
       "my-addition": Addition,
       "my-subtraction": Subtraction
    }
}
script>