使用vuex保存singer每个歌星的基本信息

1.建src/store文件夹,建立以下文件来存储歌星信息

2.state.js

1 const state = {
2   singer:{}
3 }
4
5 export default state

2.mutations.js

1 import * as types from './mutation-types'
2 const mutations = {
3   [types.SET_SINGER](state,singer){//mutations接收两个参数，第一个是state另外一个是传递过来的值
4     state.singer = singer
5   }
6 }
7
8
9 export default mutations

3.mutation-type.js

1 export const SET_SINGER = 'SET_SINGER'

4.getters.js

export const singer = state =>state.singer

5.index.js

 1 import Vue from 'vue'
 2 import Vuex from  'vuex'
 3 import * as actions from './actions'
 4 import * as getters from './getters'//es6的语法，可以在使用mutations里面导出的内容时候直接用mutations.点出来
 5 import state from './state'
 6 import  mutations from './mutations'
 7 Vue.use(Vuex)
 8
 9 export default new Vuex.Store({
10   actions,
11   mutations,
12   getters,
13   state
14 })

6.在singer.vue中引入mapMutations from vuex,并映射到方法中，设置setSinger方法

1 import {mapMutations} from 'vuex'
2
3
4   methods:{
5         ...mapMutations({
6           setSinger:'SET_SINGER'
7         }),
8 }

7.在点击选择明星的时候，将点击明星的信息存储到setSinger中：

1  selectSinger(singerName){
2           this.$router.push({
3             path: `/singer/${singerName.id}`
4           })
5           this.setSinger (singerName)
6         },

8.在singer-detail.vue中获取点击时候保存的明星信息：

a.引入mapGetters
import {mapGetters} from 'vuex'
b.将singer映射到计算属性中：computed:{...mapGetters(['singer',])}
c.created(){}的时候打印一下singer

转载于:https://www.cnblogs.com/yangguoe/p/9459038.html

使用vuex保存singer每个歌星的基本信息相关推荐

vuex保存用户信息_Vuex状态管理
一个组件可以分为数据和视图,数据更新时,视图也会自动更新.在视图中又可以绑定一些事件,它们触发methods里面指定的方法,从而又可以改变数据.更新视图,这就是一个组件基本的运行模式. 但实际的业务中 ...
vuex保存用户信息_你想要的，vuex干货分享
欢迎每一位爱学习的同学,小郭将用一篇文章为大家梳理Vue.js 中 vuex 知识点.请大家准备,精彩内容向下看. Vuex 是什么? 先来看看官方解释: Vuex 是一个专为 Vue.js 应用程序 ...
时序数据取样方法_数据科学的抽样方法
时序数据取样方法语境 (Context) In most studies, it is pretty hard (or sometimes impossible) to analyse a whol ...
vue如何保存登录状态到全局？【vue状态管理】
如果你之前使用过vue.js,你一定知道在vue中各个组件之间传值的痛苦,在vue中我们可以使用vuex来保存我们需要管理的状态值,值一旦被修改,所有引用该值的地方就会自动更新,那么接下来我们就来学习 ...
5分钟带你入门vuex（vue状态管理）
如果你之前使用过vue.js,你一定知道在vue中各个组件之间传值的痛苦,在vue中我们可以使用vuex来保存我们需要管理的状态值,值一旦被修改,所有引用该值的地方就会自动更新,那么接下来我们就来学习 ...
市内移出版本2.0(1、一页显示15条。2、增加控制标志。3、打印表格时绑定的list的优化。4、保存迁出登记信息时根据业务流水号判断增加还是修改。5、统一管理常量)
HjdjConstants.java package cn.hnisi.gdrk.utils; /** * * @author yanghanming * @function 存放户籍登记的相关常量 ...
vuex报错 this.$store显示undefined
报错:vuex报错 this.$store显示undefined,使用vuex保存数据时,发现this.$store是undefined, 打印this,发现没有$store属性. 可能存在的问题 1 ...
Vue 2.0 起步 (3) 数据流 vuex 和 LocalStorage 实例 - 微信公众号 RSS
参考: Vue 2.0 起步(2) 组件及vue-router实例 - 微信公众号RSS Vue 2.0 起步(1) 脚手架工具vue-cli + Webstorm 2016 + webpack 本篇 ...
什么是vuex？五大核心？如何调用vuex里面的属性和方法？vuex的弊端？如何解决？
vuex就是vue官方给我们提供的一个状态管理工具,他可以解决组件之间共享数据的问题,五大核心分为:state.mutations.getters.actions.modules,state:用来存放 ...

使用vuex保存singer每个歌星的基本信息

使用vuex保存singer每个歌星的基本信息相关推荐

最新文章

热门文章