mapActions

1：先创建一个文件夹

首先我们要新建一个store文件夹，里面自定义一个index.js的文件,如果项目过大可再加一个modules文件夹下面写js文件

我们在写vuex的时候先从外再到内，比如说如果你想吃饭，我们就先拿个碗再去盛饭，下面开始展示代码，在user.js中

export default {state: { //定义数据userInfo: []},getters: {},mutations: { //定义方法AddshopInfo(state, value) {state.userInfo .push( value );}},actions: { //异步触发mutations里的方法AddshopInfoAsync(context, value) {context.commit('AddshopInfo', value) //异步触发}},modules: {},namespaced: true, // 命名空间}

在store下的index.js 里面引入 module文件夹下的 index.js ，

引入完成，挂载到 modules 属性下面

import Vue from 'vue'
import Vuex from 'vuex'import createPersistedState from 'vuex-persistedstate'
import shop from "./modules/index.js"
Vue.use(Vuex)export default new Vuex.Store({//将引入的模块 挂载到 modules属性内modules: {shop},plugins: [createPersistedState({// 存储方式：localStorage、sessionStorage、cookiesstorage: window.sessionStorage,// 存储的 key 的key值key: "shopCar",})]
})

localStorage：可长期存储数据，除非用户清楚localStorage信息，否则数据会一直存在。同一中浏览器之间，不同页面，数据可以共享。

sessionStorage：短期存储数据，用户关闭标签页后或直接关闭浏览器后数据会清空。同一浏览器不同页面之间，数据不可共享

使用方法相同。

使用的方法如下：

先在你需要的地方引入 mapActions 和 mapState

import {mapActions,mapState} from "vuex"在 methods 方法中
...mapActions('shop',["AddshopInfoAsync"]),

 shop 是存储的名字
"AddshopInfoAsync" 是方法的名字
异步触发方法 然后穿参数到user.js 中// 调用 vuex 异步触发方法 传参this.AddshopInfoAsync(...)
在 computed方法中
...mapState("shop",["userInfo"])

先在获取到了 userInfo中的数据了，可以对 userInfo 里面的数据修改，添加等

可以在页面中修改等操作，也可以调用这个值，渲染值

mapActions相关推荐

Vue教程5【vuex】getters,mapState,mapGetters,mapActions,mapMutations,模块化namespace
vuex 什么时候需要使用? 状态(数据)共享! vuex工作原理搭建vuex环境创建文件 src/store/index.js//全局安装[--save生产环境] npm install -g ...
七十二、Vuex实现双父组件数据共享、localStorage、mapActions和keep-alive
2020/10/31. 周六.今天又是奋斗的一天. @Author:Runsen 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
VUEX中关于 mapActions, mapMutations使用解析
在项目中,经常使用到VUEX状态管理,对于小项目中,直接使用 this.$store.commit('mutaion-name','参数') 或者 this.$store.dispatch('acti ...
nodejs-- vuex中mapActions
mapActions() 返回的是一个对象, 用了 ... 扩展符后,才可以放进一个对象里,和其他组件内定义的 method 在同一个 methods 对象. { methods: mapAction ...
vue——vuex mapState,mapGetters,mapMutations,mapActions
当多次获取state中的数据时会出现大量的 $store.state.属性名造成代码的冗余同时也很麻烦.就可使用 mapState(引用时使用的名称,'state中的属性名') 或 mapState ...
vuex：弄懂mapState、mapGetters、mapMutations、mapActions
转载地址:https://zhuanlan.zhihu.com/p/100941659 vuex进阶一.state 1.1 引入vuex 以后,我们需要在state中定义变量,类似于vue中的dat ...
Vuex--mapState, mapGetters, mapActions, mapMutations--使用/教程/实例
原文网址:Vuex--mapState, mapGetters, mapActions, mapMutations--使用/教程/实例_IT利刃出鞘的博客-CSDN博客简介说明本文用示例介绍Vu ...
vuex 中出现[vuex] module namespace not found in mapActions(): money找不到的报错
使用辅助函数解释小仓库模块的state. vuex 中出现[vuex] module namespace not found in mapActions(): money找不到的报错要在小仓库模块中 ...
[vue] Vuex中四个map方法的使用 mapState mapGetters mapActions mapMutations
1. mapState方法: 用于帮助我们映射state中的数据为计算属性 computed: {//借助mapState生成计算属性:sum.school.subject(对象写法)...mapSt ...

mapActions

1：先创建一个文件夹

mapActions相关推荐

最新文章

热门文章