zoukankan      html  css  js  c++  java
  • Vuex

      Vuex是什么?

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

      Vuex有什么好处?及使用场景?

        好处:可以做状态管理  采用LocalStorage 保存信息,数据便一直存储在用户的客户端中

        使用场景:适合在巨大复杂的项目中使用

      vuex就相当于vue的数据仓库

      vuex是采用集中式存储所有组件的数据状态,并且组件状态和store(后台数据)是响应的 

      vuex是vue的状态管理工具

            vuex中的state只能通过mutations改变

      vuex的优势:

        vuex的存储状态是响应式的

        它是所有组件的状态集合

      vuex的核心及其作用:

        核心概念:State、Getter、Mutation、Action、Module

        作用:组件之间的数据通信,使用单向数据流的方式进行数据的中心化管理

      详述Vuex的运行机制:

        Vuex的状态存储是响应式的,当Vue组件从store中读取时,若store状态发生改变,响应的组件也会更新状态,但是不能直接改变state,必须通过显示的提交(commit)mutations来追踪每个状态的变化

      vuex的流程图:

        每个点都是必须的,不执行那个可省略,但必须按照流程走

        

      vuex的使用

        下载vuex

          npm install vuex --save

        向vue中写入vuex

          在src下建一个文件夹store,与components同级,在里面建一个store.js,里面写:

                    

          store里面的每个文件夹写相对应的js,然后都引入到store中,注入到store仓库中

        向vm实例下注入store

          将创建的store.js引入到main.js中

            

          在main.js文件中:

            

      vuex的五大核心:

        state:

          是vuex的状态,存放数据的

          唯一修改state状态的是mutations

          state是存放数据的地方

          在state.js文件中

             

          在组件中通过 {{ this.$store.state.count }} 来获取

            

        Mutations

          是处理state的所有事件方法

          所有直接修改state的行为都是通过mutations

            

          在组件中的methods中:

            组件中的事件,通过this.$store.commit("mutations中的事件名")

            

          通过绑定事件进行修改

            

          mutations有两个参数:

            第一个参数是state,是存放的所有事件方法参数

            第二个参数是payload,传入额外的参数,叫载荷,大多数是一个对象,也会是一个数字

            在组件的methods中           在mutations.js中

                    

            载荷它其实是个对象,也可是string,numbuder,object

        actions

          和mutations一样的,都是存放事件方法,actions里面存放的是异步方法(定时器,ajax)

          在mutations.js中:

             

                          在actiond.js中

                                    

          组件事件通过:

                            this.$store.dispatch("actions 中的事件名")

            

          通过绑定事件进行触发:

            

        getters

          gettters和computed计算属性一样的

                          computed 计算属性 只是各个组件自己的

                          getters针对state

                           在getters.js中

            

          组件中通过:

                           通过:$store.getters进行访问

            

        modules

          如果一个项目非常大的话,那它的state对象也肯定很大,不好管理和维护   modules可以很好的将vuex模块化    让每个模块拥有自己的state  mutation  action . getters   这样结构清晰,便于维护,方便管理

          

                                                      

  • 相关阅读:
    20165312 我期望的师生关系
    zookeeper04---ZAB协议
    zookeeper03-集群搭建
    zookeeper02
    Zookeeper01
    防止重复提交
    手动抛出异常事务回滚问题
    redis-07主从复制
    redis06-事务
    Redis-05持久化
  • 原文地址:https://www.cnblogs.com/yanghuiting/p/11385447.html
Copyright © 2011-2022 走看看