Vuex

Vuex核心概念图

vuex有哪⼏种属性？

答：有五种，分别是 State、 Getter、Mutation 、Action、 Module
state => 基本数据(数据源存放地) getters => 从基本数据派⽣出来的数据 mutations => 提交更改数据的⽅法，同步！ actions => 像⼀个装饰器，包裹mutations，使之可以异步。 modules => 模块化Vuex

vuex和普通全局对象区别

1、Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2、你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

Vuex状态库的创建

store.js

//引入vue和vuex
import Vue from 'vue';
import Vuex from 'vuex';
//使用vuex
Vue.use(Vuex);
//创建vue实例

const state={   //要设置的全局访问的state对象
     showFooter: true,
     //要设置的初始属性值
   };
   
const getters = {   //相当于计算属性
    isShow(state) {
       return state.showFooter
    }
};
const mutations = {//同步更改状态
    show(state) {   //自定义改变state初始值的方法，这里面的参数除了state之外还可以再传额外的参数(变量或对象);
        state.showFooter = true;
    }
};
const actions = {//异步更改状态
    hideFooter(context) {  //自定义触发mutations里函数的方法，context与store 实例具有相同方法和属性
        context.commit('hide');
    },
};
const store = new Vuex.Store(
{
   state,
   getters,
   mutations,
   actions
});
 
export default store;

modules

项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
 }
const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
 }

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
})

在组件内使用Vuex状态

直接获取、修改：

//state
this.$store.state.count
//getter
this.$store.getters.count
//调用 action 修改 state 值，不带参数
this.$store.dispatch('increment');
//调用 action 修改 state 值，带参数
this.$store.dispatch('increment',{value :123});

通过辅助函数 获取、修改vuex：

vuex提供了三种辅助函数用于获取、修改vuex：
mapState、mapGetters、mapActions
即将vuex的变量或者方法映射到vue组件this指针上。
获取共享变量使用：

使用state获取共享变量

<script type="text/javascript">
import { mapState } from 'vuex'
export default{
    computed : {
        ...mapState([
            'count',
            'buttonShow'
        ])
    }
}
</script>

使用getters获取共享变量，

<script type="text/javascript">
import { mapGetters } from 'vuex'
export default{
    computed : {
        ...mapGetters([
            'count',
            'buttonShow'
        ])
    }
}
</script>

使用actions修改共享变量

<script type="text/javascript">
import { mapActions } from 'vuex'
export default{
    methods : {
    	...mapActions({increment:'increment',decrement:'decrement'}),
    }
}
</script>

通过map获取到的变量或者方法，可通过 this 直接使用或者调用。

vuex异步修改状态

在调用vuex中的方法action的时候，添加异步操作实现异步修改

const actions = {
    asyncInCrement({ commit }, n){
        return new Promise(resolve => {
            setTimeout(() => {
                commit(types.TEST_INCREMENT, n);
                resolve();
            },3000)
        })
    }
}