zoukankan      html  css  js  c++  java
  • Vue(十九)Vuex

    Vuex

    1. 简介
    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
    简单来说,用来集中管理数据,类似于React中的Redux,都是基于Flux的前端状态管理框架

    2. 基本用法

    2.1 安装vuex
    cnpm install vuex -S

    2.2 创建store.js文件,在main.js中导入并配置store.选项
        
    2.3 编辑store.js文件
    Vuex的核心是Store(仓库),相当于是一个容器,一个store实例中包含以下属性的方法:
    state 定义属性(状态、数据)
    getters 用来获取属性
    actions 定义方法(动作)
    commit 提交变化,修改数据的唯一方式就是显式的提交mutations
    mutations 定义变化
    注:不能直接修改数据,必须显式提交变化,目的是为了追踪到状态的变化
     
    2.4 编辑App.vue
     
    在子组件中访问store对象的两种方式:
    方式1:通过this.$store访问
    方式2:通过mapState、mapGetters、mapActions访问,vuex提供了两个方法:
    mapState 获取state
    mapGetters 获取getters
    mapActions 获取actions

    3. 分模块组织Vuex

    |-src
    |-store
    |-index.js
    |-getters.js
    |-actions.js
    |-mutations.js
    |-modules //分为多个模块,每个模块都可以拥有自己的state、getters、actions、mutations
    |-user.js
    |-cart.js
    |-goods.js
    |....
  • 相关阅读:
    数据分析(3)-matplotlib基础
    zabbix部署-版本3.2.6
    mysql5.6.35源码安装记录
    mysql数据库主从操作记录
    zabbix+docker
    爬与反爬
    爬虫基础 之(一) --- 初识爬虫
    android p 解锁 忽然亮屏后 恢复亮度
    ddr
    ipi
  • 原文地址:https://www.cnblogs.com/yulingjia/p/8336802.html
Copyright © 2011-2022 走看看