首页 > 代码库 > vuex学习---modules
vuex学习---modules
除非是非常大的项目,否则不推荐使用modules.
//1定义模块组
var moduleA = {
state,
mutations,
actions
};
//2声明模块组
modules:{
a:moduleA
}
//3在App.vue中调用
<p>{{$store.state.a.count}}</p>
1.在retore.js
import Vue from ‘vue‘ import Vuex from ‘vuex‘ //使用vuex模块 Vue.use(Vuex); //声明静态常量为4 const state = { count : 4 }; const mutations = { add(state,n){ state.count +=n.a; }, sub(state){ state.count--; } }; const actions = { //2种书写方式 addplus(context){ //可以理解为代表了整个的context context.commit(‘add‘,{a:10}) }, subplus({commit}){ commit(‘sub‘); } }; //1定义模块组 var moduleA = { state, mutations, actions }; //导出一个模块 export default new Vuex.Store({ //2声明模块组 modules:{ a:moduleA } //3在App.vue中调用 })
2.在App.vue中
<template> <div id="app"> <div id="appaaa"> <h1>这是vuex的示例</h1> <p>{{$store.state.a.count}}</p> <p> <button @click = "addplus">+</button> <button @click = "subplus">-</button> </p> </p> </div> </div> </template> <script> //引入mapGetters import {mapActions} from ‘vuex‘ export default { name:‘app‘, methods:{ ...mapActions([ "addplus", "subplus" ]) } } </script> <style> </style>
vuex学习---modules
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。