Vuex的介绍与使用

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

1. vuex 解决了组件之间统一状态的共享问题（解决了非父子、兄弟组件之间的数据共享）
2. 组件里面的数据持久化

它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可以预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具
devtools，extension，提供了诸多如零配置的 time-travel 调试、状态 快照导入导出等高级调试功能

小项目不推荐使用vuex

Vuex 核心概念

1、State
2、Getter
3、Mutation
4、Action
5、Module

Vuex 的使用

1、安装vuex
npm install vuex --save
2、src下新建一个 vuex 的文件夹
3、vuex 文件夹里面新建一个 store.js 引入并使用 vuex

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

Vue.use(Vuex);

const state = new Vuex.Store({
    
    
    /** 1、state 在 vuex 中用于存储数据 */
    state: {
    
    
        count: 1
    },
    /** 2、mutations 里面放的是方法，主要用于改变 state 里面的数据 */
    mutations: {
    
    
        incCount(state, data){
    
    
            // state 是上面的数据，data是传过来的值
            ++state.count;
        }
    },
    /** 3、类似计算属性，改变 state 里面的 count 数据的时候会触发
        getters里面的方法 获取新的值 */
    getters: {
    
    
        computed: (state) =>{
    
    
            console.log(state.count);
        }
    },
    /** 4、Action 类似于 mutations，不同在于：
            Action 提交的是 mutation，而不是直接变更状态。
            Action 可以包含任意异步操作。 */
    action: {
    
    
        ioncMutationsCount(context){
    
    
            ... /* 异步操作 */
            
            /** 执行 mutations 里面的 incCount 方法 */
            context.commit('incCount');
            
            ... /* 异步操作 */
        }
    },
})

export default store;

4、在需要共享数据的页面引入 stroe.js

<template>
    <div>
        {
    
    {
    
    this.$store.state.count}}
        <br>
        <button @click="incCount()">增加数量+</button>
    </div>
</template>
<script>
import store from '../vuex/store.js';

exprot default{
    
    
    data(){
    
    
        return{
    
    
            msg: '我是一个home组件'
        }
    },
    store,
    methods:{
    
    
        incCount(){
    
    
            // 改变 vuex store 里面的数据, 触发 state 里面的数据
            this.$store.commit('incCount', 123456);
            // 123456 是传递过去的数值，在方法中定义了 data 来接收
            // 触发 actions 里面的方法
            this.$store.dispath('incMutationsCount');
        }
    }
}
</script>