vuex中mapState和mapMutations用法

// 1导入 Vue 和Vuex
import Vue from 'vue'
import Vuex from 'vuex'
// user.js 就是分模块导入， moduleUser 导入的名字随便写
import moduleUser from '@/store/user.js'// 2将 Vuex安装为Vue的组件
Vue.use(Vuex);// 3.创建store 的实力对象
const store = new Vuex.Store({modules:{// 在store 中注册 的名称是userEntity， 注册的值是导入的值moduleUseruserEntity: moduleUser, }
})//4.向外共享Store的 实例对象
export default store

store.js文件

---------------------------------------------------------------------------------------------------------------------------------

export default{namespaced:true,state:() =>({//保存的对象1userEntity:{token:'asd1231',userName:"张三",gender:'男性' },//保存的对象2aaa:'123'}),// 操作对象的方法mutations:{//方法名称随便写， 传递两个参数，第一个值是固定值，第二个值是传递过来的参数cccsaveuserEntity(state, ccc) {state.aaa = ccc;console.log('cesi... 传递到后台的数据是'+ccc);}},getters:{}}

user.js文件

---------------------------------------------------------------------------------------------------------------------------------

//在代码中的使用 xxx.vue的 <script></script>vue代码  {{userEntity}}// mapState , mapMutations 相当于两个工具类import { mapState , mapMutations} from 'vuex'export default {computed:{//  userEntity story.js对象的modules key值//  ['userEntity']映射到哪个对象...mapState('userEntity', ['userEntity'])  },data() {return {};},methods: {// userEntity 映射名称随便写，  ['userEntity']映射到哪个对象...mapMutations('userEntity', ['saveuserEntity']),getUserInfor() {this.saveuserEntity('123');}

user.js文件

---------------------------------------------------------------------------------------------------------------------------------


// #ifndef VUE3
import Vue from 'vue'
import App from './App'
import store from '@/store/store.js'const app = new Vue({...App,store
})

main.js

---------------------------------------------------------------------------------------------------------------------------------

vuex中mapState和mapMutations用法相关推荐

Vuex中mapState的用法
今天遇到一个吭,最后使用vue mapState得以解决. 之前有说过使用mapState语法糖,在这里直接用computed返回竟然不行.然后在官网有看到相关说明:进入官网. 下面介绍一下mapSt ...
VUEX中关于 mapActions, mapMutations使用解析
在项目中,经常使用到VUEX状态管理,对于小项目中,直接使用 this.$store.commit('mutaion-name','参数') 或者 this.$store.dispatch('acti ...
Vuex中mapState
最近使用到这个辅助函数时,忘了好多,温习一下mapState 普通手写计算属性: computed:{count(){ // 计算属性渲染的时候 {{count}}对的 count()错误写法 ret ...
[Vuex系列] - Vuex中的getter的用法
Vuex 允许我们在store中定义"getter"(可以认为是store的计算属性).就像计算属性一样,getter的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变 ...
【vue】vuex中modules的基本用法
1,什么时候用modules 由于使用单一状态树,应用的所有状态会集中到一个比较大的对象.当应用变得非常复杂时,store 对象就有可能变得相当臃肿. 为了解决以上问题,Vuex 允许我们将 stor ...
Vuex中mapState和mapGetters的区别
...mapState辅助函数当一个组件需要获取多个状态的时候,将这些状态都声明为计算属性会有些重复和冗余.为了解决这个问题,我们可以使用...mapState辅助函数帮助我们生成计算属性,当映射的 ...
java写mapstate算子,vuex state及mapState的基础用法详解
vuex state及mapState的基础用法详解 2019-01-07 编程之家收集整理的这篇文章主要介绍了vuex state及mapState的基础用法详解,编程之家小编觉得挺不错的,现在分享 ...
[vue] Vuex中四个map方法的使用 mapState mapGetters mapActions mapMutations
1. mapState方法: 用于帮助我们映射state中的数据为计算属性 computed: {//借助mapState生成计算属性:sum.school.subject(对象写法)...mapSt ...
vue之mapMutaions的使用 vuex中 action 用法示例 api.js的使用
vue之mapMutations的使用我们通过Mutation来改变store中的state,方法往往是在子组件中使用 this.$store.commit(); 来实现,但是这样的缺点是不容易查看 ...

vuex中mapState和mapMutations用法

vuex中mapState和mapMutations用法相关推荐

最新文章

热门文章