说说你对vuex的理解？写出其原理的核心代码？

是什么

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

简单点总结，Vuex是一种状态管理模式，存在的目的是共享可复用的组件状态。

五大核心属性

• state：基本数据（数据源存放地）

• getters：从基本数据派生出来的数据；

• mutations：提交更改数据的方法，同步。

• action：像一个装饰器，包裹mutations，使之可以异步

• modules：模块化Vuex

实现

引入Vuex插件

// store.js
Vue.use(Vuex);

将Vuex.Store这个类实例化，并传入一些配置，这里以计数器作为一个例子

// store.js
const store = new Vuex.Store({
    state:{
        count:0
    },
    mutations:{
        increment(state){
            state.count++;
        },
        del(state){
            state.count--;
        },
    },
    actions:{
        asyncAdd({commit}){
            setTimeout(() => {
                commit("increment");
            }, 2000);
        }
    }
})

将store的实例配置给Vue

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

组件中使用时

<template>
    <div>计数器
        <span>{{$store.state.count}}</span>
        <br/>
        <button @click="this.add">+</button>
        <button @click="this.del">-</button>
        <button @click="this.asyncAdd">异步+</button>
    </div>
</template>
<script>
export default {
    methods:{
        add(){
            this.$store.commit('increment');
        },
        del(){
            this.$store.commit('del');
        },
        asyncAdd(){
            this.$store.dispatch('asyncAdd');
        }
    }
}
</script>