2.3 Vue Vuex的使用及设计思想

Vuex是什么

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

默认的五种基本对象：

• state：存储状态（变量）
• getters：对数据获取之前的再次编译，可以理解为state的计算属性。
• mutations：修改状态，并且是同步的。在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似。
• actions：异步操作。在组件中使用是$store.dispatch('')
• modules：store的子模块，为了开发大型项目，方便状态管理而使用的

Vuex的使用

1. 安装Vuex
   npm install vuex --save
2. 引用Vuex

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

3. 创建仓库Store

   // 创建一个store
   const store = new Vuex.Store({})
   

store对象包含四个子对象

var myStore = new Vuex.Store({
    state:{
        // 存放组件之间共享的数据
        // state用于存储数据，类似vue实例的data属性
        name:'vuex'
    },
    mutations:{
        // 显示的更改state里的数据
        // mutations是唯一修改state的方法，修改过程是同步的。
    },
    getters:{
        // 获取数据的方法
        // getters用于对state的数据进行筛选，过滤。
    },
    actions:{
        // 异步处理
        // actions发出事件，事件监听程序一般会调用mutations对state进行修改，action事件本身是异步的。提交的是mutation，而不是直接变更状态
    }
})

理解Vuex设计思想

Vuex的思想

• Vuex使用单一状态树,用一个对象 State包含了整个应用层级的所有状态,你可以理解为这些状态就是一堆全局变量和数据。
• 简而言之,Vuex采用类似全局对象的形式来管理所有组件的公用数据,如果想修改这个全局对象的数据,得按照Vuex提供的方式来修改(不能随意用自己的方式来修改)
  
  参考文档：https://vuex.vuejs.org/