vuex怎么快速上手
这篇文章主要为大家展示了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改变实时渲染
export default { data() { return { name:this.$store.state.name, }; }, }
{{name}}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; } }, }
import { mapState } from 'vuex' export default { computed: mapState([ 'token', 'name' ]) }
我们有局部计算,怎么和mapState一起用?
import { mapState } from 'vuex' export default { computed:{ getTime(){ return 123; }, ...mapState([ 'token', 'name' ]) } }
我们为它起个别名
xiaokeai,dahuilang是我们取的别名 token,name是state的值 {{xiaokeai}}
我们要state和data发生点什么
假如token的值123; balabala的值就是 123皮卡皮 {{balabala}}
取个对象值怎么破?
{{daSon}} {{xiaoSon}}
这种方式取对象写到业务里不直观,也不共用,下节==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{{getson}}
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("函数名","值")
const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } } }) import { mapActions } from 'vuex' export default { methods: { ...mapActions([ "increment" ]) } } this.increment(123);
module篇
module 目的将store按功能拆分成多个文件,利于维护管理,module 分为2种情况,1.是有命名空间, 2.是没有命名空间
没有命名空间: action、mutation 和 getter 是注册在全局的,所以要注意,方法函数不要设置同名了,如果同名了会都执行。
stete例外是局部。
import Vue from 'vue'; import Vuex from 'vuex'; import moduleA from "./modules/cat.js"; Vue.use(Vuex); const store = new Vuex.Store({ state: { token: "vuex的token", }, modules:{ moduleA } }) export default store; export default { // namespaced: true, state: { cat:"我是cat", }, mutations: { setCat(state, val) { state.cat = val; } }, actions: { }, getters: { } };
无命名空间 取值
this.$store.state.moduleA.cat 或者 ...mapState({ cat:state=>state.moduleA.cat, }), 不可以(state是局部,不可以这么取): ...mapState([ "cat" ]),
无命名空间 改变值
和原来一样,因为方法是注册在全局的 this.$store.commit("setCat",666); 或者 ...mapMutations([ "setCat" ])
有命名空间: state, action、mutation 和 getter 是局部的,模块间命名互相不冲突,可以重名。
namespaced 设置为true,即可开启
export default { namespaced: true, state: { cat:"我是cat", } }
有命名空间取值
this.$store.state.moduleA.cat 或者 ...mapState("moduleA",[ "cat" ])
有命名空间 改变值
...mapMutations("moduleA",[ "setCat" ]) this.setCat(888); 或者: this.$store.commit("moduleA/setCat",666);
最后 plugins
vuex页面刷新会丢失数据,用vuex-persistedstate插件可解决
import createPersistedState from "vuex-persistedstate"; const store = new Vuex.Store({ state: {}, mutations: {}, actions: {}, getters: {}, modules:{}, plugins: [ createPersistedState({ storage: window.sessionStorage }) ] }) export default store
以上就是关于vuex怎么快速上手的内容,如果你们有学习到知识或者技能,可以把它分享出去让更多的人看到。
文章名称:vuex怎么快速上手
路径分享:http://ybzwz.com/article/jgsgpo.html