Vue.js 2.x笔记：状态管理Vuex（7）
1. Vuex简介
Vuex是为vue.js应用程序开发的状态管理模式，解决的问题：
◊ 组件之间的传参,多层嵌套组件之间的传参以及各组件之间耦合度过高问题
◊ 不同状态中的行为需要多份复制的问题
Vuex采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
核心思想：抽取组件的共享状态，以一个全局单例的模式进行管理。
核心：store（仓库）
核心组成：
◊ state：存放项目中需要多组件共享的状态变量
◊ getters：读取器，从state中派生出状态，如：将state中的某个状态进行过滤然后获取新的状态。
◊ mutations：修改器，存放更改state里状态的方法。
◊ actions：动作，mutation的加强版，可以通过commit mutations中的方法来改变状态，最重要的是可以进行异步操作。
◊ modules：模块化，将状态和管理规则模块化封装。
Vuex文档：https://vuex.vuejs.org/zh/
2. Vuex基本使用
2.1 State
npm安装：
npm install vuex -S
基础示例：
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>libing.vue</title> <script src="node_modules/vue/dist/vue.min.js"></script>
<script src="node_modules/vuex/dist/vuex.min.js"></script>
</head> <body>
<div id="app">
Copyright © {{ author }} - 2018 All rights reserved
</div> <script>
Vue.use(Vuex); const store = new Vuex.Store({
// 定义状态
state: {
//key: value
author: 'Libing'
}
}); new Vue({
el: "#app",
store: store,
computed: {
author: function () {
return this.$store.state.author
}
}
});
</script>
</body> </html>
vue-cli示例：
/store/index.js
import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({
// 定义状态
state: {
//key: value
author: 'libing'
}
})
HelloWorld.vue
<template>
<div>Copyright © {{ author }} - 2018 All rights reserved</div>
</template> <script>
export default {
name: "HelloWorld",
computed: {
author: function() {
return this.$store.state.author;
}
}
};
</script>
<template>
<div id="app">
<HelloWorld/>
</div>
</template> <script>
import HelloWorld from "./components/HelloWorld"; export default {
name: "App",
components: {
HelloWorld
}
};
</script>
App.vue
main.js
import Vue from 'vue'
import App from './App' import store from './store/index' Vue.config.productionTip = false new Vue({
el: '#app',
store,
components: {
App
},
template: '<App/>'
})
mapState：当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，可以使用 mapState 辅助函数帮助生成计算属性。
store/index.js
import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({
state: {
count: 1,
todos: [{
id: 1,
text: 'ToDo',
status: false
},
{
id: 2,
text: 'Doing',
status: false
},
{
id: 3,
text: 'Done',
status: true
}
]
}
})
Home.vue
<template>
<div class="home">
<ul>
<li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
</ul>
</div>
</template>
<script>
import { mapState } from "vuex" export default {
computed: mapState({
count: state => state.count,
todos: state => state.todos,
dones(state) {
return state.todos.filter(todo => todo.status);
}
})
};
</script>
2.2 Getter
Vuex 允许在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
Getter 接受 state 作为其第一个参数：
store/index.js
import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({
state: {
count: 1,
todos: [{
id: 1,
text: 'ToDo',
status: false
},
{
id: 2,
text: 'Doing',
status: false
},
{
id: 3,
text: 'Done',
status: true
}
]
},
getters: {
dones: state => {
return state.todos.filter(todo => todo.status);
}
}
})
Getter 会暴露为 store.getters 对象，以属性的形式访问这些值：
Home.vue
<template>
<div class="home">
<ul>
<li v-for="todo in dones" :key="todo.id">{{ todo.text }}</li>
</ul>
</div>
</template>
<script>
export default {
computed: {
dones() {
return this.$store.getters.dones;
}
}
};
</script>
通过方法访问，让 getter 返回一个函数，来实现给 getter 传参。
import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({
state: {
count: 1,
todos: [{
id: 1,
text: 'ToDo',
status: false
},
{
id: 2,
text: 'Doing',
status: false
},
{
id: 3,
text: 'Done',
status: true
}
]
},
getters: {
dones: state => {
return state.todos.filter(todo => todo.status);
},
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id);
}
}
})
Getter 也可以接受其他 getter 作为第二个参数：
import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({
state: {
count: 1,
todos: [{
id: 1,
text: 'ToDo',
status: false
},
{
id: 2,
text: 'Doing',
status: false
},
{
id: 3,
text: 'Done',
status: true
}
]
},
getters: {
dones: state => {
return state.todos.filter(todo => todo.status);
},
donesCount(state, getters) {
return getters.dones.length;
}
}
})
2.3 Mutation
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是实际进行状态更改的地方，并且它会接受 state 作为第一个参数。
不能直接调用一个 mutation handler，要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit()。
store/index.js
import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
}
}
})
Home.vue
<template>
<div class="home">
{{ count }}
<input type="button" value="添加" @click='handleIncrement'>
</div>
</template>
<script>
export default {
data() {
return {
count: this.$store.state.count
};
},
methods: {
handleIncrement() {
this.$store.commit("increment");
console.log(this.$store.state.count)
}
}
};
</script>
2.4 Action
Action 类似于 mutation，不同在于：
◊ Action 提交的是 mutation，而不是直接变更状态。
◊ Action 可以包含任意异步操作。
store/index.js
import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({
state: {
count: 0
},
mutations:{
increment(state) {
state.count++;
}
},
actions:{
plus(context){
context.commit('increment')
}
}
})
Home.vue
<template>
<div class="home">
{{ count }}
<input type="button" value="添加" @click='add'>
</div>
</template>
<script>
export default {
computed: {
count() {
return this.$store.state.count;
}
},
methods: {
add() {
this.$store.dispatch('plus');
}
}
};
</script>
3. Vuex插件
3.1 vuex-persist状态持久化
3.2 vuex-i18n语言本地化
Vue.js 2.x笔记：状态管理Vuex（7）的更多相关文章
- Vue状态管理vuex
前面的话 由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue提供了vuex.本文将详细介绍Vue状态管理vuex 引入 当访问数据对象时,一个 V ...
- Vue之状态管理(vuex)与接口调用
Vue之状态管理(vuex)与接口调用 一,介绍与需求 1.1,介绍 1,状态管理(vuex) Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态 ...
- vue.js应用开发笔记
看vue.js有几天了,之前也零零散散的瞅过,不过一直没有动手去写过demo,这几天后台事比较少,一直在讨论各种需求(其实公司对需求还是比较重视与严谨的,一个项目需求讨论就差不多一周了,这要搁之前,天 ...
- Vue.js实战学习笔记（中）
1.递归组件给组件设置name属性,组件就可以在它的模板内调用自己,但必须给一个条件来限制递归数量.<div id="app"> <child-component ...
- 状态管理Vuex
路由Router 配置 {path:'/login',component:Login} 路由出口 router-view 传参 {path:'/login/:id',component:Login} ...
- vue创建状态管理(vuex的store机制)
1:为什么说要是永远状态管理 在使用 Vue 框架做单页面应用时,我们时常会遇到传值,组件公用状态的问题.(子父间传值文章传送门) ,如果是简单的应用,兄弟组件之间通信还能使用 eventBus 来作 ...
- vue中状态管理vuex的使用分享
一.main.js中引入 store import store from './store' window.HMO_APP = new Vue({ router, store, render: h = ...
- Vue学习日记（四）——Vue状态管理vuex
前言 先说句前话,如果不是接触大型项目,不需要有多个子页面,不使用vuex也是完全可以的. 说实在话,我在阅读vuex文档的时候,也很难以去理解vuex,甚至觉得没有使用它我也可以.但是直到我在项目碰 ...
- vue状态管理vuex从浅入深详细讲解
1.vuex简介以及创建一个简单的仓库 vuex是专门为vue框架而设计出的一个公共数据管理框架,任何组件都可以通过状态管理仓库数据沟通,也可以统一从仓库获取数据,在比较大型的应用中,数据交互庞大的情 ...
随机推荐
- springboot~Compiler时开启插件的注解功能
对于IJ这个IDE工具来说,我们会安装一些插件来帮助我们更好的进行开发,像lombok就是一款不错的插件,使用注解的方式在项目编译时帮助我们生成代码,像getter,setter,tostring等等 ...
- [翻译]Linux 内核里的数据结构 —— 基数树
目录 Linux 内核里的数据结构 -- 基数树 基数树 Radix tree Linux内核基数树API 链接 Linux 内核里的数据结构 -- 基数树 基数树 Radix tree 正如你所知道 ...
- 详解MySQL表空间以及ibdata1文件过大问题
ibdata1文件过大 原因分析 ibdata1是一个用来构建innodb系统表空间的文件,关于系统表空间详细介绍参考MySQL官网文档 上面是一个数据库的ibdata1文件,达到了780多G,而且还 ...
- entity framework 实现按照距离排序
在做项目时,经常会遇到“离我最近”这种需求.顾名思义,它需要根据用户的经纬度和事物的经纬度计算距离,然后进行排序,最后分页(当然这些操作要在数据库中进行,否则就变成假分页了). 我们通常可以用sql语 ...
- 了解一下 - Base64
Base64编码是最常见的编码方式(使用64个字符表示任意8bit字节序列),是一种基于64个可打印字符来表示任意二进制数据的方法,是从二进制转换到可见字符的过程. 使用场景 数据加密后通过Base6 ...
- 一个字符带下滑线的EditText
效果样式: 这个比较特别的editText是公司的一个新的需求,我也是在网上找了一下,然后看到了一篇博客然后修改成自己需要的样式.这种一般的思路就是在onDraw()方法绘制editText的特别的样 ...
- android 权限库EasyPermissions
文章链接:https://mp.weixin.qq.com/s/H63Sn03xV0JoINXB4SWWKA 众所周知,在android 6.0之后,如果应用程序需要危险权限,则用户必须明确向应用授予 ...
- Python3 调试技巧 —— 死循环
说下Python3不使用gdb的自身调试 前情提要:服务器莫名卡死,用网上的方法用gdb,下载了很多组件,包括那个libpython.py,都没什么用,看不到堆栈,也试了保存core文件等等 大事找官 ...
- 斐波那契数列（C#）
斐波那契数,亦称之为斐波那契数列(意大利语: Successione di Fibonacci),又称黄金分割数列.费波那西数列.费波拿契数.费氏数列,指的是这样一个数列:1.1.2.3.5.8.13 ...
- SQLServer之数据库行锁
行锁使用注意事项 1.ROWLOCK行级锁确保在用户取得被更新的行,到该行进行更新,这段时间内不被其它用户所修改.因而行级锁即可保证数据的一致性,又能提高数据操作的并发性. 2.ROWLOCK告诉SQ ...