写给新手同学的vuex快速上手指北小结

//store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: {...}, mutations: {...}, actions: {...} }) export default store //main.js ... import store from './store' Vue.prototype.$store = store const app = new Vue({ store,... }) ... //test.vue 使用时: import {mapState,mapMutations} from 'vuex'

State篇

state更新实时渲染是基于==computed==这个计算属性的,直接赋给data只能赋值初始值,不会随着state改变实时渲染

<!--state改变不会实时渲染--> export default { data() { return { name:this.$store.state.name, }; }, }

<!--监听state改变重新渲染视图--> <template> <div> {{name}} </div> <template> export default { computed: { name() { return this.$store.state.name; } }, }

注意: data中的变量如果和computed中的变量重名,data优先,注意命名

获取多个state值,写多个函数return,很繁琐,所以有==mapState==辅助函数

<!--取多个很冗余,繁琐--> export default { computed: { token(){ return this.$store.state.token; }, name(){ return this.$store.state.name; } }, }

<!--mapState 直接取出--> import { mapState } from 'vuex' export default { computed: mapState([ 'token', 'name' ]) }

我们有局部计算,怎么和mapState一起用?

import { mapState } from 'vuex' export default { computed:{ getTime(){ return 123; }, ...mapState([ 'token', 'name' ]) } }

我们为它起个别名

<template> <div> xiaokeai,dahuilang是我们取的别名 token,name是state的值 {{xiaokeai}} </div> <template> <script> import { mapState } from 'vuex' export default { computed:{ ...mapState({ xiaokeai:"token", dahuilang:"name", }) } } </script>

我们要state和data发生点什么

<template> <div> 假如token的值123; balabala的值就是 123皮卡皮 {{balabala}} </div> <template> <script> import { mapState } from 'vuex' export default { data(){ return { pikaqiu:"皮卡皮卡" } } computed:{ ...mapState({ xiaokeai:"token", dahuilang:"name", // 为了能够使用 `this` 获取局部状态,使用一个自定义名字的函数 balabala(state){ return state.token + this.pikaqiu; } }) } } </script>

取个对象值怎么破?

<template> <div> {{daSon}} {{xiaoSon}} </div> </template> <script> import { mapState } from 'vuex' export default { data(){ return { pikaqiu:"皮卡皮卡" } } computed:{ ...mapState({ daSon: state=>state.obj.yeye.baba.daSon, xiaoSon:state=>state.obj.yeye.baba.xiaoSon, }) } } </script>

这种方式取对象写到业务里不直观,也不共用,下节==Getter==有更优的方案

Getter篇

Getter是针对state的【对象】值提前做一些处理,以便用的时候直接提取

可以 this.$store.getters.xxx 使用,也可以使用mapGetters辅助函数,==辅助函数注意:== 和state一样,注入在computed中

import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { obj: { yeye: { baba: { daSon: "老大", xiaoSon: "老二" } } } }, getters: { <!--将想要提取或者处理的值这里处理好--> getson: state => { return state.obj.yeye.baba; } } }) export default store <!--用的时候,和state一样,也可以别名等等操作--> <template> <div> {{getson}} </div> </template> <script> import { mapGetters } from 'vuex' export default { computed: { ...mapGetters([ getson ]) } } </script>

Mutation篇

操作: this.$store.commit("名字","值");

import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { token: "vuex的token", }, mutations: { setToken(state, val) { state.token = val; } } }) export default store

mapMutations 辅助函数,和state一样,可以别名, ==注意:== 辅助函数注入在methods中

methods: { ...mapMutations([ 'setToken' ]) } <!--使用--> this.setToken(100); //token修改为100

Mutation 必须是同步函数,不要误解这句话,以为异步不能用,异步可以用在里面,视图的渲染,取值都没有问题,问题在于:调试的时候,一些浏览器调试插件不能正确监听state。所以方便调试,尽量将异步写入action中

Action篇

注意action的 参数不是 state ,而是context,context里面包含commit,state。基本操作:this.$store.dispatch("函数名","值")

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/9b858ff0ba6c3ca0063d8ea53d1654ee.html