[JavaScript知识库]Vuex的使用及理解

Vuex是什么？

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

为什么使用Vuex ？

试想一下，如果在一个项目开发中频繁的使用组件/兄弟传参的方式来同步data中的值，一旦项目变得很庞大，对于后期的管理和维护将非常困难。所以，Vue?为这些被多个组件频繁使用的值提供了一个统一管理的工具?Vuex?。

跟?为什么二次封装Axios 的意思差不多? 都是为了更好的开发项目。

vuex是?个状态管理?具，主要解决?中型复杂项?的数据共享问题，主要包括state,actions,mutations,getters和modules 5个要素

Vuex 的组成

1. state：所有的数据都存储在state中 state是一个对象

2. mutations：可以直接操作state中的数据

3. actions：只能调用mutations的方法

4. getters：类似计算属性实现对state中的数据做一些逻辑性的操作

5. modules：将仓库分模块存储

6. plugins : 插件

Vuex的主要流程：

?1、组件通过 dispatch 到 actions。

?2、actions 是异步操作，再 actions 中通过 commit 到 mutations 。

3、mutations 再通过逻辑操作改变 state?，从?同步到组件，更新其数据状态。

?Vuex的基本使用

在组件中显示 Vuex 中的数据：?

<div class="demo">
   {{$store.state.username}}
</div>

在组件 方法 中使用Vuex：

<script>
export default {
    data(){
        return{
        }
    },
    methods:{
        demo(){
            console.log(this.$store.state.username);
        }
    }
}
</script>

没有异步操作的话，那么我们就可以直接在组件内提交状态中的?Mutations?中自己编写的方法来达成对?state?成员的操作。注意：不建议在组件中直接对?state?中的成员进行操作，这是因为直接修改的话不能被?VueDevtools?所监控到

修改 Vuex 中的数据：

<script>
export default {
    data(){
        return{

        }
    },
    methods:{
        demo(){
            // this.$store.commit("调用Vuex mutations 中的方法","需要传的数据")
            this.$store.commit("demo","秃驴")
        }
    }
}
</script>

Vuex中

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

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        username: "秃驴飞"
    },
    mutations: {
      demo(state,arg){
        state.state.username = arg
      }
    },
    actions: {},
    modules: {}
})