VueX(Vue状态管理模式)
时间:2020-04-28
本文章向大家介绍VueX(Vue状态管理模式),主要包括VueX(Vue状态管理模式)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、初识VueX
1.1 关于VueX
VueX
是适用于在Vue
项目开发时使用的状态管理工具。试想一下,如果在一个项目开发中频繁的使用组件传参的方式来同步data
中的值,一旦项目变得很庞大,管理和维护这些值将是相当棘手的工作。为此,Vue
为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX
。在具有VueX
的Vue项目中,我们只需要把这些值定义在VueX中,即可在整个Vue项目的组件中使用。
1.2 安装
由于VueX
是在学习VueCli
后进行的,所以在下文出现的项目的目录请参照VueCli 2.x
构建的目录。
以下步骤的前提是你已经完成了Vue项目构建,并且已转至该项目的文件目录下。
-
Npm安装Vuex
npm i vuex -s
在项目的根目录下新增一个store
文件夹,在该文件夹内创建index.js
此时你的项目的src
文件夹应当是这样的
│ App.vue
│ main.js
│
├─assets
│ logo.png
│
├─components
│ HelloWorld.vue
│
├─router
│ index.js
│
└─store
index.js
1.3 使用
1.3.1 初始化store
下index.js
中的内容
import Vue from 'vue' import Vuex from 'vuex' //挂载Vuex Vue.use(Vuex) //创建VueX对象 const store = new Vuex.Store({ state:{ //存放的键值对就是所要管理的状态 name:'helloVueX' } }) export default store
1.3.2 将store挂载到当前项目的Vue实例当中去
打开main.js
import Vue from 'vue' import App from './App' import router from './router' import store from './store' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, store, //store:store 和router一样,将我们创建的Vuex实例挂载到这个vue实例中 render: h => h(App) })
1.3.3 在组件中使用Vuex
例如在App.vue中,我们要将state中定义的name拿来在h1标签中显示
<template> <div id='app'> name: <h1>{{ $store.state.name }}</h1> </div> </template>
原文地址:https://www.cnblogs.com/xiaofengfree/p/12794068.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 基于深度学习的新闻推荐算法(1)
- 以复现图表的方式来学习一篇文章
- 盘点 Python 10 大常用数据结构(上篇)
- (长文预警) 你还在烦工作中碰到的拖拽问题?一个框架jiejue
- 重磅 | 青藤与腾讯安全隆重举办容器安全平台新品战略合作发布会
- 如何使用强化学习玩21点?
- 这3个Scikit-learn的特征选择技术,能够有效的提高你的数据预处理能力
- 使用神经网络解决拼图游戏
- 用机器学习预测收益
- 一种基于深度学习的低成本细胞生物学研究方法
- 从零搭建Spring Boot脚手架(2):增加通用的功能
- Qt官方示例-K线图
- 一个快速构造GAN的教程:如何用pytorch构造DCGAN
- 从0到1开发测试平台(八)后端服务添加lombok第三方类库
- 【CSS】470- 是时候开始用 CSS 自定义属性了