vuex的基本用法与核心概念

Vuex

1.简介

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

2.基本用法

2.1 安装vuex

cnpm install vuex -S

2.2 创建store.js文件，用于配置vuex，在main.js中导入，并配置store选项

main.js：

    import Vue from 'vue'
    import App from './App.vue'

    import store from './store.js'  // 导入stroe对象

    new Vue({
        store:store,    //  配置store选项，指定为store对象，vue会自动将store对象注入到所有的子组件中
        el: '#app',     //  在子组件中通过this.$store访问该store对象
        render: h => h(App)
    })

2.3 编辑store.js文件配置store（核心）

Vuex的核心是Store（仓库）,相当于是一个容器，一个store实例中包含以下属性的方法（核心）
state   ===> 定义属性（状态，数据）
getters ===> 获取属性和方法
actions ===> 用于定义方法（动作）
commit  ===> 提交变化，修改数据的唯一方式，就是显示的提交mutations
mutations ===> 修改数据，定义变化

配置store代码：

    /**
     * Vuex配置
     * 
     */
    import Vue from 'vue'
    import Vuex from 'vuex'

    Vue.use(Vuex)
    // 定义属性（数据）
    var state = {
        count:6
    }

    // 创建store对象
    const store = new Vuex.Store({
        state:state
    })


    // 导出store对象
    export default store;

2.4 编辑App.vue

在子组件中访问store对象的两种方式
1). 通过this.$store访问
2). 通过mapGetters、mapActions访问（要使用这两个方法，需要先导入）
    mapGetters ==> 获取属性（数据）
    mapActions ==> 获取方法（动作）



..........未完，待续...........