vue_vuex
- vue 插件 npm install vuex --save
- 将多个组件的共享状态进行 集中式管理 - 极易破坏单向数据流
- 多个视图依赖于同一状态 ----- 就 props 而言:嵌套组件传参繁琐,兄弟组件传参无能为力
- 来自不同视图的行为需要变更同一状态
将组件的共享状态抽取出来: 组件共享的数据、后台请求数据
- 核心对象 store
向外暴露 store 对象
状态自管理应用 分为
state -------- 驱动应用的 数据源
view -------- 以声明方式将 state 映射到视图 - template
actions -------- 响应有用户在 view 上的用户输入导致的状态变化 - methods: {}
action 中的 commit() 来触发 mutation 的调用,间接更新 state
一个 action 中可能有多个 commit("mutation的名字", 传参给mutation)
开发工具 会监视 mutations
---------------------------------------------------------------------------------------
src/store.js -------- vuex 最核心的管理模块
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const state = { // 包含所有状态数据的对象,相当于 data
count: 1 // 指定初始状态数据
};
const actions = { // 包含 n 个用于间接更改共享状态数据方法的对象 - 分析对状态数据的几个间接操作
increment ({commit}) {commit("INCREMENT")}
decrement ({commit}) {commit("DECREMENT")}
incrementIfOdd ({commit, state}) {if(state.count%2===1)commit("INCREMENT")}
// 不像 react-thunk 才能实现 redux 的异步,vuex 本身就可以异步
incrementAsync ({commit}) {setTimeout(()=>commit("INCREMENT"), 1000)}
};
const mutations = { // 包含 n 个用于直接更改共享状态数据方法的对象 - 分析对状态数据的几个直接操作
INCREMENT (state) {state.count++}
DECREMENT (state) {state.count--}
};
const getters = { // 包含了 计算属性 的定义
evenOrOdd(state){return state.count % 2 === 0 ? '偶数' : '奇数'}
};
export default new Vuex.Store({
state,
actions,
mutations,
getters
});
---------------------------------------------------------------------------------------
src/main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store/index' /* eslint-disable no-new */
new Vue({
el: '#app',
components: {
App
},
template: '<App/>',
store
})
src/App.vue -------- 组件中使用 vuex 管理的状态数据 - ViexModel 即 组件对象的 this 会多一个 $store 对象
...
methods: {
increment () {this.$store.dispatch("increment")}
decrement () {this.$store.dispatch("decrement")}
incrementIfOdd () {this.$store.dispatch("incrementIfOdd")}
incrementAsync () {this.$store.dispatch("incrementAsync")}
}
...
------------------------------------ 简化写法 ------------------------------------
import {mapState, mapGetters, mapActions} from "vuex"
...
computed: {
...mapState(["count"]), // 函数返回有一个对象,拆包解构以后再放入另一个对象
....mapGetters(["evenOrOdd"])
} // 相当于:
methods: {...mapActions(["increment", "decrement", "incrementIfOdd", "incrementAsync"])} // 用的少?因为只适合只有 this.$store 的函数
...
Vuex.Store({ modules: {...} }) --------- 大型项目,按 功能模块 合理拆分 store
Vuex 允许我们将 store 分割成模块(module)。
每个模块拥有自己的 state、mutation、action、getter、
甚至是嵌套子模块——从上至下进行同样方式的分割
- 对于模块内部的 mutation 和 getter,接收的第一个参数是模块的局部状态对象
- 同样,对于模块内部的 action,局部状态通过 context.state 暴露出来,根节点状态则为 context.rootState
- 对于模块内部的 getter,根节点状态会作为第三个参数暴露出来
5
5
vue_vuex的更多相关文章
随机推荐
- 第二十一节:ADO层次上的海量数据处理方案(SqlBulkCopy类插入和更新)
一. 简介 1. 背景: 虽然前面EF的扩展插件Z.EntityFramework.Extensions,性能很快,而且也很方便,但是该插件要收费,使用免费版本的话,需要定期更新,如果不更新,将失效, ...
- docker学习-----docker可视化portainer
docker的可视化操作界面portainer 1.创建一个挂载区 docker volume create portainer_data 2.安装( docker run -d - ...
- APPLE-SA-2019-3-25-6 iCloud for Windows 7.11
APPLE-SA-2019-3-25-6 iCloud for Windows 7.11 iCloud for Windows 7.11 is now available and addresses ...
- 【汇总目录】Python
跟廖雪峰老师学Python笔记 [2019年03月29日] 匿名函数 [2019年03月25日] 返回函数与闭包 [2019年03月25日] sorted [2019年03月25日] filter [ ...
- 前端基础之jQuery
JavaScript和jQuery的区别 JavaScript是一门编程语言,我们用它来编写客户端浏览器脚本 jQuery是javascript的一个库,包含多个可重用的函数,用来辅助我们简化java ...
- bzoj2733 永无乡 splay树的启发式合并
https://vjudge.net/problem/HYSBZ-2733 给一些带权点,有些点是互相连通的, 然后给出2种操作,在两点间加一条边,或者询问一个点所在的连通块内的第k小值的编号 并查集 ...
- Lua中的一些库(2)
[前言] 在<Lua中的一些库(1)>这篇文章中,总结了一部分Lua中的库函数,一篇文章肯定是总结不完的,所以,就来一个<Lua中的一些库(2)>.希望大家能忍住.来吧. 操作 ...
- python学习之numpy.ewaxis
当多维数组的某一列时返回的是一个行向量 >>> X = np.array([[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12]]) >> ...
- wifi的主动扫描和被动扫描
要实现wifi上的探针模块,简单了了解了802.11中的各种帧,对一些帧的发送频率和方式也有简单了解.不过了解的都不够细致.只是简单知道手机打开wifi后回不停的向外发送probe request这个 ...
- liunx redis集群添加密码
第一种方法: 修改每个节点redis.conf配置文件: masterauth 123456 requirepass 123456 各个节点的密码都必须一致,否则Redirected就会失败 重新启动 ...