官方地址: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的更多相关文章

  1. vuex 基础:教程和说明

    作者注:[2016.11 更新]这篇文章是基于一个非常旧的 vuex api 版本而写的,代码来自于2015年12月.但是,它仍能针对下面几个问题深入探讨: vuex 为什么重要 vuex 如何工作 ...

  2. Vuex 基础

    其他章节请看: vue 快速入门 系列 Vuex 基础 Vuex 是 Vue.js 官方的状态管理器 在vue 的基础应用(上)一文中,我们已知道父子之间通信可以使用 props 和 $emit,而非 ...

  3. Do not mutate vuex store state outside mutation handlers.

    组件代码: selectItem(item,index) { this.selectPlay({ list: this.songs, index }) }, ...mapActions([ 'sele ...

  4. Vuex基础-Mutation

    借助官网的一张图,更改 Vuex 的 store 中的状态的唯一方法是提交 mutation.不可以直接对其进行赋值改变.需要注意的是,mutations只能做一些同步的操作. ​​​ 代码结构: ​ ...

  5. Vuex基础-Getter

    官方地址:https://vuex.vuejs.org/zh/guide/getters.html Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性).就像 ...

  6. vuex的state,mutation,getter,action

    开始!正常的简单的拆分下是这样的文件当然module可以在store下面新建一个文件夹用来处理单独模块的vuex管理比较合适. 1.index.js下面 import Vue from 'vue' i ...

  7. vue单页面应用刷新网页后vuex的state数据丢失问题以及beforeunload的兼容性

    最近在用vue写h5项目,当使用window.location重定向页面或者刷新当前页面时, 发现当刷新网页后,保存在vuex实例store里的数据会丢失. 后来在网上查找大神的解决方案如下: exp ...

  8. vuex基础入门

    Vuex简介 vuex的安装和组成介绍 [外链图片转存失败(img-nWQUUuyh-1565273314232)(https://upload-images.jianshu.io/upload_im ...

  9. Vuex基础 -01 -实现简易计数器 -支持 加数/ 减数/ 奇数再加/ 异步加法(setTimeout 1000ms) -单组件演示语法

    Vuex 的结构图 工程组织 Vuex的核心管理程序 store.js /* vuex的核心管理程序 */ import Vue from 'vue' import Vuex from 'vuex' ...

随机推荐

  1. Vue.js-----轻量高效的MVVM框架(七、表单控件绑定)

    话不多说,先上完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  2. 持久层框架---jdbc

    1.JDBC编程步骤: 1.1 加载数据库驱动: 1.2 获取数据库连接: 1.3 通过Connection对象创建Statement对象: 1.4 使用Statement对象执行SQL语句: 1.5 ...

  3. pat06-图5. 旅游规划(25)

    06-图5. 旅游规划(25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 有了一张自驾旅游路线图,你会知道城市间的高速公路长度.以及该 ...

  4. Day5下

    T1 #include<iostream> #include<cstring> #include<cstdio> #include<algorithm> ...

  5. C#语言开发规范

    1.  命名规范 a) 类 [规则1-1]使用Pascal规则命名类名,即首字母要大写. eg: Class Test { ... } [规则1-2]使用能够反映类功能的名词或名词短语命名类. [规则 ...

  6. Javascript 学习 Boolean

    构造函数 new Boolean(value) //构造函数 Boolean(value) //转换函数 参数 value 由布尔对象存放的值或者要转换成布尔值的值 返回值 当作为一个构造函数(带有运 ...

  7. Java入门之Tomcat安装及环境变量配置

    一.Tomcat下载 地址:http://tomcat.apache.org/download-80.cgi#8.0.39 本人用的是Tomcat/8.0.37免安装版,解压到一个目录,本人用的是:D ...

  8. iOS-swift-类和对象

    1.类(class) 使用关键字 class 创建一个类.属性直接在类里面声明,属性可以是变量,也可以是常量.方法和函数的创建方法一致. class Shape { var numberOfSides ...

  9. web子项目的路径问题

    http://baidu.com/userms/ userms是一个子应用程序,项目中使用的路径 /content/css/..   从http://baidu.com/  开始 ~/content/ ...

  10. mysql-增删改(DML)

    插入:insert /*方式一:经典的插入 insert into 表名(列名,...) values(值1,...); */ #.插入的值的类型要与列的类型一致或兼容 INSERT INTO bea ...