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

const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } } }) <!--辅助函数操作 注入在methods中--> 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; <!--moduleA.js--> 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,即可开启

<!--moduleA.js 文件--> export default { namespaced: true, state: { cat:"我是cat", } }

有命名空间取值

this.$store.state.moduleA.cat 或者 <!--注意这里：命名空间的名字带上，在modules注册时候呢个key值--> <!--也可以别名，方法和之前一样，就是第一个参数是空间名--> ...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快速上手内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章: