vuejs + vuex

vuejs 的数据是双向绑定的,而这些数据只是在父组件中,如果各个组件公用的数据就要通过一个容器去管理起来,

vuex是不错的选择,

今天看了下vuex的教程:

总结下遇到的问题: vue-cli 了一个项目

import的时候发现了报错:node的版本太低,升级版本就好了。

import {

mapState,

mapActions,

mapGetters,

map

} from "vuex";//注意大括号。

https://github.com/lin-xin/notepad/ 这个例子非常好。 结合了modules的概念

vuex核心

五大核心属性:

  • State
  • Getters
  • Mutations
  • Actions
  • Modules

四大辅助函数

  • mapState
  • mapGetters
  • mapActions
  • mapMutations

运行流程

  • State是数据data的存储仓库,可划分为子模块module,每个module有自立的上下文对象context,有自己的state、mutation、action、getters、modules等等体系
  • Getters 主要用来从State中获取数据,优点是具有通用性
  • Mutations 是用来更新state状态仓库里的数据的,唯一更改数据地方,实时同步修改, 不能异步,不能异步,不能异步
  • Actions 主要补充增加 异步更新 state仓库数据的功能,内部依然是触发Mutation来实现
  • Modules 为了划分state模块,便于管理数据仓库

注意: Getters,Mutations,Actions无论是不是在module块中,都会直接挂载到 vuex的实例 store上,只有state保持链式命名空间,比如,store.state.module[key]等等,所以如果是子模块的state,直接用辅助函数mapState是获取不到的.

时间: 2024-10-05 05:33:03

vuejs + vuex的相关文章

15.vue动画& vuex

Vue.config.productionTip = false; ==是否显示提示信息== ==import/export== export xxx 必须跟跟对象或者和定义一起 对象: export {xxxx} 定义:?export let a = xxx; ??? export function(){} --------------------------------- 引入: import modA from "./a" 错误 import {a} from "./a

Vue.js ——十分钟让你学会 Vuex

一. 什么是Vuex? Vuex Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化. Vuex核心 上图中绿色虚线包裹起来的部分就是Vuex的核心, state中保存的就是公共状态, 改变state的唯一方式就是通过mutations进行更改. 可能你现在看这张图有点不明白, 等经过本文的解释和案例演示, 再回来看这张图, 相信你会有更好的理解. 二. 为什么要使用Vuex? 试想这样的场景,

Vue.js——十分钟入门Vuex

一. 什么是Vuex? Vuex Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化. Vuex核心 上图中绿色虚线包裹起来的部分就是Vuex的核心, state中保存的就是公共状态, 改变state的唯一方式就是通过mutations进行更改. 可能你现在看这张图有点不明白, 等经过本文的解释和案例演示, 再回来看这张图, 相信你会有更好的理解. 二. 为什么要使用Vuex? 试想这样的场景,

vuex实践示例

前言 Vuex的文档翻了几遍,依然只会最简单的用法.对其更多的功能不太了解.这次因为重新开始一个前后端分离项目,我希望使用vue+typescript,这时就涉及到ts版的vuex,才发现自己vuex都不懂,如何ts化呢?于是再次从0开始学一遍vuex. 这次有个意外的发现,在Vuex官方文档 核心概念 - 项目结构 最后一行有句 请参考购物车示例,点击打开了github vuex项目,发现里面有很多examples.于是下载下来,一个一个学习.刚开始就是照抄代码.网上很多大神都说抄代码没用,但

Vue.js组件之间的通信

导语:组件之间的关系不外乎两种, 父子组件和非父子组件,本文将对两类组件之间的通信方式进行详细阐述. 父子组件间的通信 通信方式1(单向绑定): Props down, Events up (建议使用) Props down, Events up 是指 使用props向子组件传递数据,父组件属性发生变化时,子组件可实时更新视图:子组件发生变化,可以使用$emit发送事件消息,以此向父组件传递变化消息. props 是单向的,当父组件的属性变化时,将传递给子组件,但子组件中的props属性变化不会

Vue 全家桶

第 1 章:Vue 核心 1.1. Vue 的基本认识1.1.1. 官网1) 英文官网: https://vuejs.org/2) 中文官网: https://cn.vuejs.org/ 1.1.2. 介绍描述1) 渐进式 JavaScript 框架2) 作者: 尤雨溪(一位华裔前 Google 工程师)3) 作用: 动态构建用户界面 1.1.3. Vue 的特点1) 遵循 MVVM 模式2) 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发3) 它本身只关注 UI, 可以轻松引入 v

【心无旁骛】vuex-typescript-example

我不惮以最大的赞美去赞美这样的项目,真的是非常有创意又有能力. 先放上我喜欢的这个项目的开源地址:https://github.com/gluons/vuex-typescript-example 我们再看一下项目的效果 这是一个可以存储颜色的取色器呢,刷新页面会发现颜色是有保存的,取色器中的颜色改变,左右两个box的颜色也会改变. 接下来我们来分析代码 main.ts中一般定义全局公共组件和样式等 //main.ts import Vue from 'vue'; // vuetify: 为移动

vuejs学习——vue+vuex+vue-router项目搭建(一)

前言 快年底了却有新公司邀请了我,所以打算把上家公司的学到一下技术做一些总结和分享. 现在vuejs都2.0了,我相信也有很多朋友和我一样实际项目还是选择vue1.0的或者给新手一些参考,不管在选择哪个版本的时候,希望你都熟读了vue+vuex+vue-router的官方文档.下面我们就开始吧. Vue搭建 这里我假设我们的电脑都安装了nodejs,那么我现在开始吧. 我们先新建一个文件(VueProject),通过命令行的方式进入这个文件夹,现在假设我们进入了VueProject文件夹,接下来

探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用

前言 首先说明这并不是一个教程贴,而记事本应用是网上早有的案例,对于学习 vuex 非常有帮助.我的目的是探索 vuex 2.0 ,然后使用 vue 2.0 + vuex 2.0 重写这个应用,其中最大的问题是使用 vue-cli 构建应用时遇到的问题.通过这些问题深入探索 vue 以及 vuex . 我对于框架的学习一直断断续续,最先接触的是 react,所以有一些先入为主的观念,喜欢 react 更多一点,尤其在应用的构建层面来说.之所以断断续续,是因为自己 JS 基础较弱,刚开始学习的时候