zoukankan      html  css  js  c++  java
  • vuex是什么东西?

    vuex是什么鬼?

    文档上面对vuex的解释是 "一个专为 Vue.js 应用程序开发的状态管理模式",恩,看完这句是否对vuex有了一个大概的认识?
    答案是:"认识你个蛇头"。

    好吧,在我的认识里,vuex其实就是将组件中的数据集中起来管理的东西,vue是一个根据数据渲染视图的框架,当组件中的数据变化了,视图相应的产生变化,那这里的数据变化,也可以称作是状态变化,所以官方给的解释是一个 "状态管理模式"。

    了解一下vuex的安装和使用

    • 和vue-router差不多,直接用包管理工具安装即可 -- npm install vuex / yarn add vuex
    • 在入口文件中引入 vuex ,在注册到Vue实例中
    import Vuex from 'Vuex'
    Vue.use(Vuex)
    

    使用vuex

    • 既然vuex是一个把数据集中起来管理的东西,那么我们将数据集中在哪里?
    • 怎么访问这些集中起来的数据?
    • 如果这些数据需要修改计算,那么用何种方式计算这些数据?

    开始使用vuex,vuex用数据仓库(store)来管理被集中起来的数据,我们在使用vuex的时候,首先new一个Vuex.store的实例,为了管理方便,一般我们新建一个目录专门用来存放store仓库,在vuex中需要用到vue,所以首相引入vue,vuex,再通过new方法构建出一个数据仓库的实例。

    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex);
    export default new Vuex.store({参数对象})
    
    

    在根组件中引入这个Vuex.store实例,将其注册到Vue实例中

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import Vuex from 'Vuex'
    import store from './store'  //引入Vuex.store实例
    
    Vue.config.productionTip = false
    
    Vue.use(Vuex);
    
    new Vue({
        el: '#app',
        router,
        store,   //把Vuex.store的实例给到Vue实例中的store属性
        template: '<App/>',
        components: { App }
    });
    
    

    在创建实例的时候传入的参数对象中,有一个state属性,在这个属性中用来存放全局的应用数据,组件中的data存放的是局部数据。

    在我们把Vuex.store实例注入到Vue实例中的时候,Vue实例对象下就会多出来一个属性:$store,我们在组件内部可以通过this.$store来访问这个Vuex.store实例。通过this.$store.state来访问被存起来的全局数据。

    为了满足对数据的各种操作,在Vuex.store实例对象参数中除了state之外还有很多属性:

    • getters
      • 在这个属性中存放着state原始数据的派生数据,类似于组件中的计算属性,当我们在state中取出的原始数据需要早计算之后再使用的时候,可以用getters来对数据进行处理。
      • getters属性的值是一个对象,对象下存放着计算数据的方法,这些方法接收两个参数
        • store的state (原始数据)
        • store的getters (计算后数据)
    • Mutation
      • 从外部更改store中数据的唯一方法就是在外部提交一个mutation,当组件在使用数据的过程中,通过用户的操作或其他途径需要对store中的数据进行修改时,不能直接修改,唯一的办法是向store提交一个mutation,store的Mutation属性下检测提交的mutation,将修改数据的工作交由Mutation处理
      • this.$store.commit('事件名',事件处理函数的参数)
      • 在Vuex.store的实例参数中的Mutation中声明这个事件处理函数,对数据进行处理
    • Action
      在Vuex中除了Mutation还有一个属性可以用来修改数据,和Mutation类似,但又不同,不同之处在于:
      - Mutation处理之后不会返回任何结果
      - Action 处理提交的也是Mutation,不是直接更改状态(数据),Action可以包含任意异步操作
      - Action通过 this.$store.dispatch('事件名',参数)
      - 如果我们希望store修改完数据以后会返回数据给组件,那么使用actions,否则使用mutations
    只研朱墨作春山
  • 相关阅读:
    C# 数组冒泡排序复习
    在建工程转固流程
    增强 | 屏幕增强的实现 (事务代码:MM01) 转自ABAP之家
    MM | 采购订单中不同的用户分配查看价格(事务代码:ME23N)
    【SSH网上商城项目实战15】线程、定时器同步首页数据(类似于博客定期更新排名)
    【SSH网上商城项目实战14】商城首页UI的设计
    【SSH网上商城项目实战13】Struts2实现文件上传功能
    【SSH网上商城项目实战12】添加和更新商品功能的实现
    【SSH网上商城项目实战11】查询和删除商品功能的实现
    【SSH网上商城项目实战10】商品类基本模块的搭建
  • 原文地址:https://www.cnblogs.com/guolintao/p/7787164.html
Copyright © 2011-2022 走看看