Vuex 快速入门
2017-02-07 20:05
351 查看
Vuex 快速入门
基本用途:
将某些data变成组件间公用的状态,组件随时都可以进行访问和响应,解决了props传值的链式响应的代码冗余
给状态配以公用方法,将状态的变更及时响应并处理
基本用法:
/store/store.jsimport 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); } } }
相关文章推荐
- 转: Vue.js——60分钟组件快速入门(上篇)
- Vue.js——60分钟组件快速入门(下篇)
- Vue.js——60分钟webpack项目模板快速入门【8】
- Vue.js快速入门实例
- webpack+vue.js快速入门教程
- Vue.js——60分钟快速入门
- Vue.js——60分钟快速入门
- Vue.js——60分钟组件快速入门(下篇) 概述【3】
- Vue.js——60分钟组件快速入门(上篇)【2】
- Vue.js学习 Item1 --快速入门
- Vue.js学习 Item1 --快速入门
- Vue.js快速入门
- Vue.js 60 分钟快速入门
- Vue.js——60分钟browserify项目模板快速入门【7】
- Vue.js快速入门教程
- Vue.js——60分钟快速入门
- Vue.js——vue-router 60分钟快速入门
- vue.js快速入门
- vue-router 快速入门
- Vue.js——60分钟快速入门