Vuex 快速入门
来源:互联网 发布:天刀少女脸型数据 编辑:程序博客网 时间:2024/06/07 03:18
Vuex 快速入门
基本用途:
将某些data变成组件间公用的状态,组件随时都可以进行访问和响应,解决了
props
传值的链式响应的代码冗余给状态配以公用方法,将状态的变更及时响应并处理
基本用法:
/store/store.js
import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);export const store = new Vuex.Store({ state: { sideBarOpened: false //放置公用状态 }, getters: { changeState: state => { //相当于vue实例中的methods,用于处理公用data //自vuex 面向组件的数据处理 } }, mutations: { //写法与getters相类似 //组件想要对于vuex 中的数据进行的处理 //组件中采用this.$store.commit('方法名') 的方式调用,实现充分解耦 //内部操作必须在此刻完成(同步) }, actions: { //使得mutations能够实现异步调用,实现例如延迟调用 increment ({ commit }, payload) { commit('突变方法名') //payload应该是一个对象,可通过模板方法调用传入对象的方式将数据从组件传入vuex }, asyncIncrement({commit}) => { setTimeout(() => { commit('increment') }, 1000) } }, modules: { //引入某一个state的以上集合的模块,会自动分别填充到上面,使得结构更加清晰 }});
main.js
import { store } from './store/store'**new Vue({ el: '#app', store, //注入根组件 ...})
访问vuex中的数据和方法
this.$store.state.数据名this.$store.getters.方法名
受影响组件局部定义计算属性响应变化数据
computed: { open () { return this.$store.state.sideBarOpened }}
将 store 中的 getters/mutations 映射到局部(计算属性/方法)使用mapGetters/mapMutations
辅助函数
import { mapGetters } from 'vuex'computed: { // 使用对象展开运算符将 getters 混入 computed 对象中 ...mapGetters([ //映射 this.doneTodosCount 为 store.getters.doneTodosCount 'doneTodosCount', //'getter名称', // 映射 this.doneCount 为 store.getters.doneTodosCount doneCount: 'doneTodosCount' // 三个点表示将内部拿出生成键值对,这样使得组件本身的计算属性不受影响 // 此语法依赖babel-preset-stage-2 ]) }
注意事项:
mutation 必须是同步函数 — devtool要保存快照,方便追踪状态变化
使用 v-model 绑定 vuex 计算属性的时候要设置get 和 set 才能双向绑定
computed: { value: { get () { return this.$store.getters.value; }, set (event) { this.$store.dispatch('updateValue', event.target.value); } }}
2 0
- Vuex 快速入门
- vue2+vuex+vue-router 快速入门(五) vuex 介绍
- Vuex入门
- vuex入门
- vue2+vuex+vue-router 快速入门(一) 简单介绍
- vue2+vuex+vue-router 快速入门(二) 项目搭建
- vuex快速上手
- 快速掌握vuex
- Vuex简单入门
- Vuex 入门介绍
- vuex的入门学习
- Vuex简单入门
- Vuex 入门介绍
- vuex(入门软文)
- Vuex简单入门
- Vuex简单入门
- Vuex 入门介绍
- Vuex简单入门
- ♪ ♩ ♫ 海的声音(一)你一年中的8760小时
- Android Studio问题收集贴
- Android Activity的构造方法
- poj 3160 Father Christmas flymouse(强连通缩点+最长路)
- php 生成ics文件
- Vuex 快速入门
- BZOJ 3110, K大数查询
- Oracle动态执行表不可访问
- BZOJ 1109: [POI2007]堆积木Klo 神分析, LIS, BIT, 二分
- Vue.js学习系列一 —— vue-router2学习实践笔记(附DEMO)
- Storm的安装步骤
- linux系统批量挂载磁盘(磁盘大于2T)
- [Java]注解
- Android Service完全解析,关于服务你所需知道的一切(上)