Vuex基础-State
官方地址:https://vuex.vuejs.org/zh/guide/state.html
由于 Vuex 的状态存储是响应式的,从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态。
目录结构:
index.js:
import Vue from 'vue'
import Vuex from 'vuex'
import state from "./state"
import mutations from "./mutations"
import actions from "./actions"
import user from './module/user' Vue.use(Vuex) export default new Vuex.Store({
state,
mutations,
actions,
modules: {
user
}
})
state.js
const state = {
appName:'admin'
}
export default state
user.js
const state = {
//
userName:'Caoqi'
}
const mutations = {
//
}
const actions = {
//
}
export default {
state,
mutations,
actions
}
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Bus from './lib/bus' Vue.config.productionTip = false
Vue.prototype.$bus = Bus; new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
store.vue:
<template>
<div>
<a-input :value="inputValue" @input="handlerInput"></a-input>
<p>appName: {{ appName }}</p>
<p>userName : {{ userName }}</p>
</div>
</template>
<script>
import AInput from "_c/AInput.vue";
import AShow from "_c/AShow.vue"; export default {
name: "store",
data() {
return {
inputValue: ""
};
},
components: {
AInput: AInput,
AShow:AShow
},
computed:{
appName () {
return this.$store.state.appName
},
userName () {
return this.$store.state.user.userName
}
},
methods: {
handlerInput(val) {
this.inputValue = val;
}
}
};
</script>
效果:
根据官方说法:当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState
辅助函数帮助我们生成计算属性,让你少按几次键:
上面的store.vue组件还可以这样写:
<template>
<div>
<a-input :value="inputValue" @input="handlerInput"></a-input>
<p>appName: {{ appName }}</p>
<p>userName : {{ userName }}</p>
</div>
</template>
<script>
import AInput from "_c/AInput.vue";
import AShow from "_c/AShow.vue";
//变量的解构赋值,等同于import vuex from 'vuex'; const mapState=vuex.mapState;
import { mapState } from "vuex";
import { stat } from "fs";
export default {
name: "store",
data() {
return {
inputValue: ""
};
},
components: {
AInput: AInput,
AShow: AShow
},
computed: {
//ES6展开操作符 mapState展开会形成一个对象 使用对象展开运算符将此对象混入到外部对象中
...mapState({
appName: state => state.appName,
userName: state => state.user.userName
})
},
methods: {
handlerInput(val) {
this.inputValue = val;
}
}
};
</script>
如果在模块中使用了命名空间,如在user.js中使用了命名空间:
const state = {
//
userName:'Caoqi'
}
const mutations = {
//
}
const actions = {
//
}
export default {
namespaced:true,//有利于模块更加密闭,不受外界的干扰
state,
mutations,
actions
}
则需要修改store.vue组件代码:
<template>
<div>
<a-input :value="inputValue" @input="handlerInput"></a-input>
<p>appName: {{ appName }}</p>
<p>userName : {{ userName }}</p>
</div>
</template>
<script>
import AInput from "_c/AInput.vue";
import AShow from "_c/AShow.vue";
//变量的解构赋值,等同于import vuex from 'vuex'; const mapState=vuex.mapState;
import { mapState } from "vuex";
import { stat } from "fs";
export default {
name: "store",
data() {
return {
inputValue: ""
};
},
components: {
AInput: AInput,
AShow: AShow
},
computed: {
...mapState({
appName: state => state.appName
}),
...mapState('user',{
userName: state => state.userName
})
},
methods: {
handlerInput(val) {
this.inputValue = val;
}
}
};
</script>
Vuex基础-State的更多相关文章
- vuex 基础:教程和说明
作者注:[2016.11 更新]这篇文章是基于一个非常旧的 vuex api 版本而写的,代码来自于2015年12月.但是,它仍能针对下面几个问题深入探讨: vuex 为什么重要 vuex 如何工作 ...
- Vuex 基础
其他章节请看: vue 快速入门 系列 Vuex 基础 Vuex 是 Vue.js 官方的状态管理器 在vue 的基础应用(上)一文中,我们已知道父子之间通信可以使用 props 和 $emit,而非 ...
- Do not mutate vuex store state outside mutation handlers.
组件代码: selectItem(item,index) { this.selectPlay({ list: this.songs, index }) }, ...mapActions([ 'sele ...
- Vuex基础-Mutation
借助官网的一张图,更改 Vuex 的 store 中的状态的唯一方法是提交 mutation.不可以直接对其进行赋值改变.需要注意的是,mutations只能做一些同步的操作. 代码结构: ...
- Vuex基础-Getter
官方地址:https://vuex.vuejs.org/zh/guide/getters.html Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性).就像 ...
- vuex的state,mutation,getter,action
开始!正常的简单的拆分下是这样的文件当然module可以在store下面新建一个文件夹用来处理单独模块的vuex管理比较合适. 1.index.js下面 import Vue from 'vue' i ...
- vue单页面应用刷新网页后vuex的state数据丢失问题以及beforeunload的兼容性
最近在用vue写h5项目,当使用window.location重定向页面或者刷新当前页面时, 发现当刷新网页后,保存在vuex实例store里的数据会丢失. 后来在网上查找大神的解决方案如下: exp ...
- vuex基础入门
Vuex简介 vuex的安装和组成介绍 [外链图片转存失败(img-nWQUUuyh-1565273314232)(https://upload-images.jianshu.io/upload_im ...
- Vuex基础 -01 -实现简易计数器 -支持 加数/ 减数/ 奇数再加/ 异步加法(setTimeout 1000ms) -单组件演示语法
Vuex 的结构图 工程组织 Vuex的核心管理程序 store.js /* vuex的核心管理程序 */ import Vue from 'vue' import Vuex from 'vuex' ...
随机推荐
- idea进行断点快捷键
快捷键 功能描述 F8 单步调试,不进入函数内部 F7 单步调试,进入函数内部 Shift+F7 选择要进入的函数 Shift+F8 跳出函数 Alt+F9 运行到断点 Alt+F8 执行表达式查看结 ...
- java生成复杂word文档
在Web应用中,有时需要按照固定的模板将数据导出到Word,如流程审批单,在流程处理完成后将处理过程按照流程单的要求导出,有时程序中需要实现生成 标准Word文档,要求能够打印,并且保持页面样式不变, ...
- 安装NetCDF及HDF5
平台信息 Description: CentOS Linux release 7.6.1810 (Core) 安装步骤 下载NetCDF.HDF5.zlib.curl[使用wget命令即可] 解包:t ...
- 01-消息中间件概述和ActiveMq入门
1.mq解决的问题 系统异步处理 应用解耦 流量削峰 日志处理 消息通信 2.消息中间件的2中模型 2.1 Point-to-Point(P2P) / 点对点 / 类比:送快递 特点: + 一个消费生 ...
- python 利用正则表达的式提取特定数据如手机号
import re file=open('1.txt','r') listfile=file.readlines() listfile=','.join(listfile)#合并文本 listfile ...
- 获取url传的参数转变为对象的方法
function GetRequest() { var url = location.search; //获取url中"?"符后的字串 var theRequest = new O ...
- inventor卸载不干净
AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...
- vue-cli生成的重要代码详解
安装好vue-cli之后,我们可以在package.json中看到下面所示: { // 项目名称 "name": "myvue", // 项目版本 " ...
- C++有关拷贝构造函数(默认/浅/深拷贝构造函数)
拷贝结构函数顾名思义就是复制对象. 先讲一下默认拷贝函数: 默认拷贝就是直接赋值,让程序调用默认拷贝结构函数. Student p1; Student p2 = p1//或者Student p2(p1 ...
- 集合类中modCount字段的作用
ArrayList.LinkedList.HashMap中都有一个字段叫modCount.这个字段的用途,在ArrayList的父类AbstractList源码中有注释,说的很清楚: /** * Th ...