vuex 状态管理工具的理解 理解 理解 理解

目录

1.认识vuex

2、vuex的属性

        1、state

        2、getter

        3、mutations

        4、actions

        5、modules

3、对于vuex的数据传递流程,如下所示

4、使用Vuex管理数据的好处

5、vuex持久化 

---

1.认识vuex

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

2、vuex的属性

        vuex有五大核心属性: state, getter, mutations, actions, modules

        1、state

        存储数据,存储状态,在根实例中注册了store后,用this.$store.state来访问;
对应vue里面的data,存放数据方式为响应式,vue组件从store中读取数据,如数据发生变化,组件也会对应的更新.

        2、getter

        可以认为是storer的计算属性,它的返回值会根据它的依赖被缓存起来,且只有当它的依赖发生了改变才会被重新计算

        3、mutations

        更改vuex的store中的状态的唯一方法是提交mutation.

        4、actions

        包含任意异步操作,通过提交mutation间接变更状态       

        5、modules

        将store分割成模块,每个模块都具有state,getter,mutations,actions,甚至是嵌套子模块

3、对于vuex的数据传递流程,如下所示

        当组件进行数据修改的时候我们需要调用dispatch来触发actions里面的方法,actions里面的每个方法中都会有一个方法，方法中可以解构出commit,当方法执行的时候可以通过commit来触发mutations里面的方法进行数据修改.mutations里面的每个函数都有一个state参数,这样 就可以在mutations里面进行state的数据修改,当数据修改完毕后,会传导给页面,页面的数据也会发生改变

4、使用Vuex管理数据的好处

        1、能够在vuex中集中管理共享的数据，易于开发和后期维护；
        2、能够高效地实现组件之间的数据共享，提高开发效率；
        3、存储在vuex的数据都是响应式的，能够实时保持数据与页面的同步；

5、vuex持久化 

持久化安装命令：

npm install vuex-persistedstate --save

/store/index.js   与state同级

plugins: [

    createPersistedState({

      storage: window.sessionStorage,

    }),

  ],