vuex之仓库数据的设置与获取
如果你之前使用过vue.js,你一定知道在vue中各个组件之间传值的痛苦,在vue中我们可以使用vuex来保存我们需要管理的状态值,值一旦被修改,所有引用该值的地方就会自动更新,那么接下来我们就来学习一下vuex是如何修改状态值的。
1. 搭建Demo
使用vue create 项目名创建一个项目,在src根目录下创建一个components目录并在该目录下面创建2个组件:header.vue,content.vue,在App.vue根组件中进行引入然后展示,删除不必要的组件。
<template>
<div style="height:60px;" class="header">
<span></span>
<span></span>
</div>
</template> <script>
export default { }
</script> <style>
.header span{
display: inline-block;
width: 32px;
height: 32px;
cursor: pointer;
}
.header span:first-child{
background: red;
} .header span:last-child {
background: blue;
} </style>
header.vue
<template>
<div class="content" :style="`background: pink`">
Content
</div>
</template> <script>
export default {
mounted(){ }
}
</script> <style>
.content {
height: 600px;
text-align: center;
line-height: 600px;
}
</style>
content.vue
<template>
<div id="app">
<Header></Header>
<Content></Content>
</div>
</template> <script>
import Header from "./components/header";
import Content from "./components/content";
export default {
// 注册组件
components: {
Header,
Content
}
};
</script> <style>
</style>
App.vue
页面效果:
下面需要实现点击红色按钮使得背景变为红色,点击蓝色按钮使得背景变成蓝色,下面使用vuex实现。
2. 设置和获取仓库中的数据
先安装vuex。
yarn add vuex
在src根目录下创建store,然后创建一个index.js文件。
import Vuex from "vuex";
import Vue from "vue"; // 注册插件
Vue.use(Vuex); // 创建仓库实例
const store = new Vuex.Store({
// 仓库的数据
state: {
test_data: "this is some test data",
color: "light-green"
}, // 同步修改state的值
mutations: {
// mutations下的方法第一个参数是固定state
// 第二个参数是传进来的参数
setColor(state, color) {
state.color = color;
}
}
}); export default store;
stroe/index.js
实现后的代码
<template>
<div style="height:60px;" class="header">
<span @click="handleClick('red')"></span>
<span @click="handleClick('blue')"></span>
</div>
</template> <script>
export default {
methods: {
handleClick(color){
// 不推荐使用这个方法来修改state的值
// this.$store.state.color = color; // this.$store.commit调用mutations下面的方法
// 第一个参数就是mutations下面的的具体方法
// 第二个参数就是传递给方法的参数
this.$store.commit("setColor", color)
}
}
}
</script> <style>
.header span{
display: inline-block;
width: 32px;
height: 32px;
cursor: pointer;
}
.header span:first-child{
background: red;
} .header span:last-child {
background: blue;
} </style>
header.vue
<template>
<div class="content" :style="`background: ${$store.state.color}`">Content</div>
</template> <script>
export default {
mounted() {
// this.$store当把仓库引入到main.js的时候,组件可以通过this.$stroe获取仓库的数据
console.log(this.$store);
}
};
</script> <style>
.content {
height: 600px;
text-align: center;
line-height: 600px;
}
</style>
content.vue
import Vue from 'vue'
import App from './App.vue'
import store from './store' Vue.config.productionTip = false new Vue({
render: h => h(App),
store,
}).$mount('#app')
main.js
vuex之仓库数据的设置与获取的更多相关文章
- 072——VUE中vuex之使用mutations修改购物车仓库数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vuex数据管理-数据模块化
对于vue这类mvvm框架来说,其核心就是组件与数据,因此做好相应的数据管理极为重要.这里分享下vuex数据模块化管理的方法,有利于搭建便于维护.协作的vue项目. vuex管理基本方法和使用 模块化 ...
- vuex数据管理-数据适配
由于接口在上线前,不可避免的会出现变动,小则属性名变,大则结构变化.如果处理不当,结构变化时,视图的代码也需要做相应的更改,然后就是容错方法的变动,接着重新自测等,这样,变化成本随着结构的复杂度大大加 ...
- 封装cookie设置和获取的简易方法
(function() { var tool = { expires: "expires", // 过期时间expires path: "path", // 路 ...
- django设置并获取cookie/session,文件上传,ajax接收文件,post/get请求及跨域请求等的方法
django设置并获取cookie/session,文件上传,ajax接收文件等的方法: views.py文件: from django.shortcuts import render,HttpRes ...
- 爬虫 Http请求,urllib2获取数据,第三方库requests获取数据,BeautifulSoup处理数据,使用Chrome浏览器开发者工具显示检查网页源代码,json模块的dumps,loads,dump,load方法介绍
爬虫 Http请求,urllib2获取数据,第三方库requests获取数据,BeautifulSoup处理数据,使用Chrome浏览器开发者工具显示检查网页源代码,json模块的dumps,load ...
- UWP入门——应用数据和设置
数据有两个基本的分类,应用数据和用户数据,而用户数据则为由用户拥有的数据,如文档,音乐或电子邮件等,下面将大致的介绍一下应用数据的基本操作. 应用数据:应用数据包含APP的状态信息(如运行时状态,用户 ...
- 2017.9.27 JavaWeb 属性的设置和获取
3.4.3新属性的设置和获取 对于getpParamter方法是通过参数传递获得数据, 设置数据的方法格式: void request.setAttribute("key",Ob ...
- Net Core 中WebAPI有关 Session的设置,及获取
步骤一: 在Startup 文件中做相应的设置 ConfigureServices方法里添加 //ConfigureServices添加: services.AddSession(options =& ...
随机推荐
- Codeforces 142B(二分染色、搜索)
要点 会发现本质上棋盘分成了若干个独立集,本集合内的点放不放棋子并不影响其他集合内的 集合的划分方式就是满棋盘跳马步直到全跳过了,然后每个集合就分成两队,我们选人多的那队放棋子,人少那队当禁区 con ...
- Leetcode103. Binary Tree Zigzag Level Order Traversal二叉树的锯齿形层次遍历
给定一个二叉树,返回其节点值的锯齿形层次遍历.(即先从左往右,再从右往左进行下一层遍历,以此类推,层与层之间交替进行). 例如: 给定二叉树 [3,9,20,null,null,15,7], 3 / ...
- 如何在vue项目中使用md5.js及base64.js
一.在项目根目录下安装 npm install --save js-base64 npm install --save js-md5 二.在项目文件中引入 import md5 from 'js-md ...
- jeecms 强大的采集功能优化 转载 https://blog.csdn.net/jeff06143132/article/details/7099003
========================================================= 没办法附件上传不了,AcquisitionSvcImpl.java类: //---- ...
- 微信小程序 this.setData() 详解
1.定义 setData()函数用于将逻辑层数据发送到视图层,同时对应的改变this.data的值. 2.setData()参数格式 接受一个对象,以键(key)值(value)的方式改变值. 其中, ...
- jQ-点击查看更多
<style type="text/css"> .hi { width: 200px; height: 18vw; background-color: pink; fo ...
- message d:\WEB_APP_QuChongFu\file\五月.xlsx (文件名、目录名或卷标语法不正确。)
原因是 文件名或文件夹名中不能出现以下字符:\ / : * ? " < > | 但是后台读取到的附件的文件路径就是这样的 网上大佬说了,这样处理 rep ...
- Mac OS 安装 独立的asio库
先安装boost,见前文,然后上官网下载不带boost的asio,版本为:asio-1.12.2 cd到下载的库目录,配置 ./configure --with-boost="boost的安 ...
- golang之select
2.switch语句 (1) (2) 3.select语句 4.for语句 (1)常规式 (2)条件式 (3) (4) goto break continue fallthrought ------- ...
- webpack学习之——模块(Modules)
在模块化编程中,开发者将程序分解成离散功能块(discrete chunks of functionality),并称之为模块. 每个模块具有比完整程序更小的接触面,使得校验.调试.测试轻而易举. 精 ...