【Vue】Vuex学习和封装使用

1，概念：

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

      1）state：定义共享存储的数据   （辅助函数：mapState ）
      2）mutation：注册改变数据状态的方法
      3）getters：对共享数据进行过滤操作
      4）action：异步改变共享数据
      5）moudle：将store，模块化，每个模块都有上述属性

  真正意义上的使用：

        新建vuex的管理机制文件store.js文件，在main.js中导入并挂载到app实例上；

 

 1，store.js：Vuex主要实现

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

export default new Vuex.Store({
    // state，数据初始化
    state: {
        count: 1
    },
    // mutations，修改数据
    mutations: {
        // 无参数调用：通过$store.commit('add')操作
        add(state){
            state.count += 1;
        },
        reduce(state){
            state.count -= 19;
        },
        // 有参数调用：通过$store.commit('change'，sum)操作
        change(state,sum){
            state.count = sum;
        }
    },
    // getters，过滤数据，通过$store.getters.getCount调用
    getters: {
        getCount(state){
            return state.count += 9;
        }
    },
    // actions，异步修改，通过$store.dispatch('addTasy')操作
    actions: {
        // 延迟2秒修改数据
        addTasy(context){
            setTimeout(()=>{
                context.commit('add');
            },2000)
        },
        // 延迟2秒修改数据
        reduceTasy(context){
            setTimeout(()=>{
                context.commit('reduce');
            },2000)
        }
    }
})

2，Vuex使用

 参考：https://blog.csdn.net/saber04/article/details/99292734