VueX的使用（笔记）

vuex介绍

Vuex 是一个专门为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

应用场景

当应用遇到多个组件共享状态的时候

vuex和本地存储的区别

vuex可以实时改变状态值的状态，而本地存储不行
vuex刷新页面后状态值会消失，而本地存储不会消失

vuex的使用

1.安装vuex

npm install vuex --save

2.src目录下新建store

3.在index.js引用vuex，并创建一个count初始值为1

4.在main.js上使用vuex

5.测试页面拿count值

<h1>count:{{$store.state.count}}</h1>

vuex核心(state)

state

vuex使用单一状态树，用一个对象包含了全部应用层级状态。
展示vuex状态，由于vuex的状态存储是响应式的，所以从store实例中获取状态最简单的方法就是在计算属性中返回某个状态：

<template>
    <div>
        <h1>{{count}}</h1>
    </div>
</template>
<script>
export default {
  computed:{
      count(){
          return this.$store.state.count
      }
  }
}
</script>

getter(类似于vue中的computed)

有时候我们想获取从store中的state中其他状态，那么getters就可以很完美解决这个问题，getters类似于vue中的computed计算属性，会根据它的依赖值发生变化的时候会被重新计算。

getters接受的第一个参数是store中的state

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
    state:{
        count:1,
        num:2
    },
    getters:{
        numCount(state){
            return state.num + state.count
        }
    }
})

export default store;

getters会暴露为store.getters对象

this.$store.getters.numCount;   //  3

mutation（类似于vue中的metheds）

改变Vuex中的state状态的唯一方法是提交mutation。vuex中的mutation类似于事件：每个mutation都有一个字符串的事件类型和一个回调函数。这个回调函数就是我们实际进行状态更改的地方，并且它会接受第一个参数为store中的state，第二个参数为额外参数

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
    state:{
        count:1,
        num:2
    },
    mutations:{
        addCount(state,payload){
            //变更状态
            state.count += payload.count;
        }
    }
})

export default store;

使用：

 this.$store.commit('addCount',{count:10});

注意：mutation必须是同步函数

action(类似于mutation)

action类似于mutation，不同的是：

• action提交的是mutation，而不是直接变更状态
• action可以包含任意异步操作

action函数接受一个于store实例具有相同方法和属性的context对象，音系可以调用context.commit提交一个mutation，同时也可以context.getters和context.state来获取getters和state

注册一个没有异步的action

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
    state:{
        count:1,
        num:2
    },
    mutations:{
        addCount(state,payload){
            //变更状态
            state.count += payload.count;
        }
    },
    actions:{
        addCountA(context){
            context.commit('addCount',{count:5})
        }
    }
})

export default store;

注册一个有异步的action

    actions:{
        addCountA(context){
            setTimeout(()=>{
                context.commit('addCount',{count:5})
            },1000)
        }
    }

使用：

this.$store.dispatch('addCountA')

vuex的辅助函数

mapState

mapState 辅助函数帮助我们生成计算属性,顶替了this.$store.state.count

import {mapState} from 'vuex'
export default {
computed:{
      ...mapState({
          count:'count'
      }),
  },
}

mapGetters

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性

import {mapGetters} from 'vuex';
export default {
  computed:{
      ...mapGetters({
          numCount:'numCount'
      })
  }
}

mapMutations

mapMutations 辅助函数将组件中的metheds映射为store.commit调用

import {mapMutations} from 'vuex';
export default {
  methods:{
      ...mapMutations({
          add:"addCount"
      })
  }
}

mapActions

mapActions 辅助函数将组件的metheds映射为store.dispatch调用

import {mapActions} from 'vuex';
export default {
  methods:{
      ...mapActions({
          addA:"addCountA"
      })
  }
}