Vue学习（七）

最新推荐文章于 2022-11-17 15:39:29 发布
最新推荐文章于 2022-11-17 15:39:29 发布
阅读量149 收藏
点赞数
分类专栏： Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cherry_Zj/article/details/122157337
版权

文章目录

vuex

1.概念

​ 在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

2.何时使用？

​ 多个组件需要共享数据时

3.搭建vuex环境

  1. 创建文件：src/store/index.js

    //引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state
})

  2. 在main.js中创建vm时传入store配置项

    ......
//引入store
import store from './store'
......

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store
})

4.基本使用

在这里插入图片描述

在这里插入图片描述

  1. 初始化数据、配置actions、配置mutations，操作文件store.js

    //引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)

const actions = {
    //响应组件中加的动作
	jia(context,value){
		// console.log('actions中的jia被调用了',miniStore,value)
		context.commit('JIA',value)
	},
}

const mutations = {
    //执行加
	JIA(state,value){
		// console.log('mutations中的JIA被调用了',state,value)
		state.sum += value
	}
}

//初始化数据
const state = {
   sum:0
}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
})

  2. 组件中读取vuex中的数据：$store.state.sum

  3. 组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据)或 $store.commit('mutations中的方法名',数据)

    注意：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

5.getters的使用

  1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。

  2. 在store.js中追加getters配置

    ......

const getters = {
	bigSum(state){
		return state.sum * 10
	}
}

//创建并暴露store
export default new Vuex.Store({
	......
	getters
})

  3. 组件中读取数据：$store.getters.bigSum

6.四个map方法的使用

  1. mapState方法：用于帮助我们映射state中的数据为计算属性

    computed: {
    //借助mapState生成计算属性：sum、school、subject（对象写法）
     ...mapState({sum:'sum',school:'school',subject:'subject'}),
         
    //借助mapState生成计算属性：sum、school、subject（数组写法）
    ...mapState(['sum','school','subject']),
},

  2. **mapGetters方法：**用于帮助我们映射getters中的数据为计算属性

    computed: {
    //借助mapGetters生成计算属性：bigSum（对象写法）
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成计算属性：bigSum（数组写法）
    ...mapGetters(['bigSum'])
},

  3. mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

    methods:{
    //靠mapActions生成：incrementOdd、incrementWait（对象形式）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    //靠mapActions生成：incrementOdd、incrementWait（数组形式）
    ...mapActions(['jiaOdd','jiaWait'])
}

  4. mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

    methods:{
    //靠mapActions生成：increment、decrement（对象形式）
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    
    //靠mapMutations生成：JIA、JIAN（对象形式）
    ...mapMutations(['JIA','JIAN']),
}

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

7.模块化+命名空间

  1. 目的：让代码更好维护，让多种数据分类更加明确。

  2. 修改store.js

    const countAbout = {
  namespaced:true,//开启命名空间
  state:{x:1},
  mutations: { ... },
  actions: { ... },
  getters: {
    bigSum(state){
       return state.sum * 10
    }
  }
}

const personAbout = {
  namespaced:true,//开启命名空间
  state:{ ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    countAbout,
    personAbout
  }
})

  3. 开启命名空间后，组件中读取state数据：

    //方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject']),

  4. 开启命名空间后，组件中读取getters数据：

    //方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])

  5. 开启命名空间后，组件中调用dispatch

    //方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

  6. 开启命名空间后，组件中调用commit

    //方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

求和案例

未使用vuex插件

在这里插入图片描述

src/components/Count.vue

<template>
	<div>
		<h1>当前求和为：{{sum}}</h1>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment">+</button>
		<button @click="decrement">-</button>
		<button @click="incrementOdd">当前求和为奇数再加</button>
		<button @click="incrementWait">等一等再加</button>
	</div>
</template>

<script>
	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
				sum:0 //当前的和
			}
		},
		methods: {
			increment(){
				this.sum += this.n
			},
			decrement(){
				this.sum -= this.n
			},
			incrementOdd(){
				if(this.sum % 2){
					this.sum += this.n
				}
			},
			incrementWait(){
				setTimeout(()=>{
					this.sum += this.n
				},500)
			},
		},
	}
</script>

<style lang="css">
	button{
		margin-left: 5px;
	}
</style>

src/App.vue

<template>
	<div>
		<Count/>
	</div>
</template>

<script>
	import Count from './components/Count'
	export default {
		name:'App',
		components:{Count},
	}
</script>

加getters

在这里插入图片描述

src/store/index.js

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions——用于响应组件中的动作
const actions = {
	/* jia(context,value){
		context.commit('JIA',value)
	},
	jian(context,value){
		context.commit('JIAN',value)
	}, */
	jiaOdd(context,value){
		if(context.state.sum % 2){
			context.commit('JIA',value)
		}
	},
	jiaWait(context,value){
		setTimeout(()=>{
			context.commit('JIA',value)
		},500)
	}
}
//准备mutations——用于操作数据（state）
const mutations = {
	JIA(state,value){
		state.sum += value
	},
	JIAN(state,value){
		state.sum -= value
	}
}
//准备state——用于存储数据
const state = {
	sum:0 //当前的和
}
//准备getters——用于将state中的数据进行加工
const getters = {
	bigSum(state){
		return state.sum*10
	}
}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
	getters
})

src/components/Count.vue

<template>
	<div>
		<h1>当前求和为：{{$store.state.sum}}</h1>
		<h3>当前求和放大10倍为：{{$store.getters.bigSum}}</h3>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment">+</button>
		<button @click="decrement">-</button>
		<button @click="incrementOdd">当前求和为奇数再加</button>
		<button @click="incrementWait">等一等再加</button>
	</div>
</template>

<script>
	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		methods: {
			increment(){
				this.$store.commit('JIA',this.n)
			},
			decrement(){
				this.$store.commit('JIAN',this.n)
			},
			incrementOdd(){
				this.$store.dispatch('jiaOdd',this.n)
			},
			incrementWait(){
				this.$store.dispatch('jiaWait',this.n)
			},
		},

	}
</script>

<style lang="css">
	button{
		margin-left: 5px;
	}
</style>

案例优化

在这里插入图片描述

src/components/Count.vue

<template>
  <div>
    <h1>当前求和为：{{sum}}</h1>
    <h2>当前求和放大10倍为：{{bigSum}}</h2>
    <h3>我在{{school}},学习{{subject}}</h3>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button>
    <button @click="incrementOdd(n)">当前求和为奇数再加</button>
    <button @click="incrementWait(n)">等一等再加</button>
  </div>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
    name:'Count',
    data(){
      return{
        n:1,  //用户选择的数字
      }
    },
     computed:{
    // 自己写计算属性
    //   he(){
    //     return this.$store.state.sum
    //   },
    //   xuexiao(){
    //     return this.$store.state.school
    //   },
    //   xueke(){
    //     return this.$store.state.subject
    //   }
    // 借助mapState生成计算属性，从state中读取数据。（对象写法）
    // ...mapState({he:'sum',xuexiao:'school',xueke:'subject'}),

    //   sum(){
    //     return this.$store.state.sum
    //   },
    //   school(){
    //     return this.$store.state.school
    //   },
    //   subject(){
    //     return this.$store.state.subject
    //   }
    // 借助mapState生成计算属性，从state中读取数据。（数组写法）生成的计算属性值和所获取的值名称要一致
    ...mapState(['sum','school','subject']),

    // ****************************************************************
      // bigSum(){
      //   return this.$store.getters.bigSum
      // }
      // 借助mapGetters生成计算属性，从getters中读取数据。（对象写法）
      // ...mapGetters({bigSum:'bigSum'}),
      // 借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
      ...mapGetters(['bigSum']),

     },
    methods: {
      //程序员自己写的
      // increment(){
      //   //没有业务逻辑可以不用调dispatch再调commit,可以直接调用commit  
      //  this.$store.commit('JIA',this.n)
      // },
      // decrement(){
      //  this.$store.commit('JIAN',this.n)
      // },
      // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations（对象写法）
      ...mapMutations({increment:'JIA',decrement:'JIAN'}),
      // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations（数组写法）
      // ...mapMutations(['JIA','JIAN']),

      // incrementOdd(){
      //     this.$store.dispatch('jiaOdd',this.n)
      // },
      // incrementWait(){
      //     this.$store.dispatch('jiaWait',this.n)
      // },

      // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions（对象写法）
      ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),
      // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions（数组写法）
      // ...mapActions(['jiaOdd','jiaWait'])

    },
}
</script>
<style lang="css">
button{
  margin-left: 5px;
}
  
</style>

多组间共享

在这里插入图片描述

src/components/Count.vue

<template>
  <div>
    <h1>当前求和为：{{sum}}</h1>
    <h2>当前求和放大10倍为：{{bigSum}}</h2>
    <h3>我在{{school}},学习{{subject}}</h3>
    <h3 style="color:red">Person组件的总人数是：{{personList.length}}</h3>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button>
    <button @click="incrementOdd(n)">当前求和为奇数再加</button>
    <button @click="incrementWait(n)">等一等再加</button>
  </div>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
    name:'Count',
    data(){
      return{
        n:1,  //用户选择的数字
      }
    },
     computed:{
    // 借助mapState生成计算属性，从state中读取数据。（数组写法）生成的计算属性值和所获取的值名称要一致
    ...mapState(['sum','school','subject','personList']),

      // 借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
      ...mapGetters(['bigSum']),

     },
    methods: {

      // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations（对象写法）
      ...mapMutations({increment:'JIA',decrement:'JIAN'}),

      // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions（对象写法）
      ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),
      // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions（数组写法）
      // ...mapActions(['jiaOdd','jiaWait'])

    },
}
</script>
<style lang="css">
button{
  margin-left: 5px;
}
  
</style>

src/components/Person.vue

<template>
  <div>
    <h1>人员列表</h1>
    <h3>Count组件的求和为{{sum}}</h3>
    <input type="text" placeholder="请输入名字" v-model="name" />
    <button @click="add">添加</button>
    <ul>
      <li v-for="p in personList" :key="p.id">{{p.name}}</li>
    </ul>
  </div>
</template>

<script>
import {nanoid} from 'nanoid'
export default {
  name: "Person",
  data() {
    return {
      name:''
    }
  },
  computed:{
    personList(){
      return this.$store.state.personList
    },
    sum(){
      return this.$store.state.sum
    }
  },
  methods: {
    add(){
      const personObj = {id:nanoid(),name:this.name}
      this.$store.commit('ADD_PERSON',personObj)
      this.name = ''
    }
  },
};
</script>

src/store/index.js

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//使用Vuex插件
Vue.use(Vuex)
//准备actions——用于响应组件中的动作
const actions = {
    // jia(context,value){
    //     context.commit('JIA',value)
    // },
    // jian(context,value){
    //     context.commit('JIAN',value)
    // },
    jiaOdd(context,value){
        if(context.state.sum % 2){
            context.commit('JIA',value)
        }
    },
    jiaWait(context,value){
        setTimeout(()=>{
            context.commit('JIA',value)
        },500)
    }
}
//准备mutations——用于操作数据
const mutations = {
    JIA(state,value){
        state.sum += value
    },
    JIAN(state,value){
        state.sum -= value
    },
    ADD_PERSON(state,value){
        state.personList.unshift(value)
    }
}
//准备state——用于存储数据
const state = {
    sum:0,  //当前的和
    school:'尚硅谷',
    subject:'前端',
    personList:[
        {id:'001',name:'张三'}
    ]
}

//准备getter——用于将state中的数据进行加工
const getters = {
    bigSum(state){
        return state.sum*10
    }
}
//创建并暴露store
export default new Vuex.Store({
    actions, //相当于actions:actions,
    mutations, //相当于mutations:mutations,
    state, //相当于state:state,
    getters
})

src/App.vue

<template>
    <div>
      <Count/>
      <hr>
      <Person/>
    </div>
</template>

<script>
import Count from './components/Count.vue'
import Person from './components/Person.vue'

export default {
  name: "App",
  components:{Count,Person},
};
</script>

模块化

在这里插入图片描述
count.vue文件和优化中的一样
src/components/Person.vue

<template>
  <div>
    <h1>人员列表</h1>
    <h3>Count组件的求和为{{sum}}</h3>
    <h3>列表中第一个人的名字是{{firstPersonName}}</h3>
    <input type="text" placeholder="请输入名字" v-model="name" />
    <button @click="add">添加</button>
    <button @click="addWang">添加一个姓王的人</button>
    <button @click="addPersonServe">添加一个人，名字随机</button>

    <ul>
      <li v-for="p in personList" :key="p.id">{{p.name}}</li>
    </ul>
  </div>
</template>

<script>
import {nanoid} from 'nanoid'
export default {
  name: "Person",
  data() {
    return {
      name:''
    }
  },
  computed:{
    personList(){
      return this.$store.state.personAbout.personList
    },
    sum(){
      return this.$store.state.countAbout.sum
    },
    firstPersonName(){
      return this.$store.getters['personAbout/firstPersonName']
    }
  },
  methods: {
    add(){
      const personObj = {id:nanoid(),name:this.name}
      this.$store.commit('personAbout/ADD_PERSON',personObj)
      this.name = ''
    },
    addWang(){
      const personObj = {id:nanoid(),name:this.name}
      this.$store.dispatch('personAbout/addPersonWang',personObj)
    },
    addPersonServe(){
      this.$store.dispatch('personAbout/addPersonServe')
    }
  },
};
</script>

src/store/count.js

//求和相关配置
export default{
    namespaced: true,
    actions: {
        jiaOdd(context, value) {
            if (context.state.sum % 2) {
                context.commit('JIA', value)
            }
        },
        jiaWait(context, value) {
            setTimeout(() => {
                context.commit('JIA', value)
            }, 500)
        },
    },
    mutations: {
        JIA(state, value) {
            state.sum += value
        },
        JIAN(state, value) {
            state.sum -= value
        },
    },
    state: {
        sum: 0,  //当前的和
        school: '尚硅谷',
        subject: '前端',
    },
    getters: {
        bigSum(state) {
            return state.sum * 10
        }
    },
}

src/store/person.js

//人员管理相关配置
import axios from 'axios'
import { nanoid } from 'nanoid'
export default{
    namespaced: true,
    actions: {
        addPersonWang(context,value){
            if(value.name.indexOf('王') === 0){
                context.commit('ADD_PERSON',value)
            }else{
                alert("添加的人必须姓王")
            }
        },
        addPersonServe(context){
            axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
                response => {
                    context.commit('ADD_PERSON',{id:nanoid(),name:response.data})
                },
                error => {
                    alert(error.message)
                }
            )
        }
    },
    mutations: {
        ADD_PERSON(state, value) {
            state.personList.unshift(value)
        }
    },
    state: {
        personList: [
            { id: '001', name: '张三' }
        ]
    },
    getters: {
        firstPersonName(state){
            return state.personList[0].name
        }
    }
}

src/store/index.js

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
import countOptions from './count'
import personOptions from './person'
//使用Vuex插件
Vue.use(Vuex)

//创建并暴露store
export default new Vuex.Store({
    modules: {
        countAbout: countOptions,
        personAbout: personOptions
    }
})

App.vue文件也和优化中的一样

Cherry_Zj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue学习手册
02-26
这份"Vue学习手册"旨在引导你逐步掌握Vue的核心概念和实践技巧。 一、Vue基础知识 Vue的基础架构围绕着一个核心对象Vue实例，它是一个数据绑定和事件处理的容器。通过声明式的模板语法，你可以轻松地将数据绑定到...
Vue核心概念(state,getters,mutations)简单应用实例
weixin_44700621的博客
03-19 1270
本文通过简单的应用示例介绍了vue中核心概念state，getters，mutations的使用方法
Vuex初探——求和小案例
ｎｅｗｘｃ
12-30 590
1. 什么是Vuex 在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。 2. 什么时候使用Vuex 多个组件需要共享数据时 3. 搭建Vuex环境 1.创建文件：src/store/index.js //引入Vue核心库 import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //应用Vuex插件 Vue.use(Vuex) ![vue
Vuex 详解
qq_47824967的博客
12-22 132
vuex 详解 state，getters，mutations，Actions
Vuex 学习4 - 核心概念Mutation
qq_41302594的博客
04-08 274
文章目录Mutation提交载荷（Payload）对象风格的提交方式Mutation 需要遵循 Vue 的响应规则使用常量替代 Mutation 事件类型Mutation 必须是同步函数在组件中提交 Mutation例子以及结果 Mutation 教程来自 Vuex 官网：https://vuex.vuejs.org/zh/guide/mutations.html 更改 Vuex 的 store...
[Vuex系列] - Mutation的具体用法
weixin_34007906的博客
04-23 456
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。接下来我们还是用上一篇文章在state中存放的count为例，来看利用Mutation修改state的count属性。利用commit来触发mutation函数在mut...
vue学习笔记
11-22
本学习笔记将涵盖Vue的基础概念、核心特性以及常见应用场景，帮助初学者建立起对Vue的全面理解。 一、Vue.js简介 Vue.js的核心理念是通过声明式的模板语法来简化DOM元素的更新，实现数据驱动视图。它采用MVVM...
vue学习笔记vue学习笔记
08-14
Vue 学习笔记 本文档主要介绍 Vue 框架的基础知识点，包括 Vue 路由、CSS 样式、表单获取值、数据绑定、事件处理等。 一、Vue 路由 在 Vue 中， `<router-view/>` 是用来承载当前级别下的子级路由的一个视图标签...
vue学习笔记，B站黑马程序员的javaweb
最新发布
11-05
Vue学习笔记 Vue是一个基于JavaScript的渐进式框架，用于构建用户界面。下面是关于Vue的学习笔记。 一、Vue基本知识 在Vue中，以点vue结尾的文件称为组件文件，包含三部分：template、script、style。template是...
Vue props属性配置学习
06-09
本篇文章将深入探讨Vue props属性配置的学习，帮助你更好地理解和运用这一功能。 一、Props的基本使用 1. 定义Props 在子组件中，我们通过`props`选项来定义可以接收的props。例如，如果我们希望子组件接受一个名...
在Vuex中Mutations修改状态操作
11-20
上篇是读取state，这篇是修改状态。即如何操作Mutations。 一. $store.commit( ) Vuex提供了commit方法来修改状态 1.store.js文件 const mutations={ add(state){ state.count++ }, reduce(state){ state.count-- } } 2.在button上的修改方法 <button @click=”$store.commit(‘add’)”>+</button> <button @click=”$store.commit(‘reduce’)”>-</butt
vuex学习笔记
qq_64152659的博客
11-17 318
vuex相当于一个仓库，可以更加集中且有效的帮助我们管理繁杂的数据信息，并且能有效解决多个组件共享状态时，单向数据流的简洁性得不到保障的问题。
vuex中的actions，mutations，getters
m0_58656423的博客
05-10 755
vuex中的actions，mutations，getters
Mutation与Action的使用
baidu_33295233的博客
03-15 1764
Vuex是一个状态管理模式，它采用集中式管理各个组件的状态，并以一定的规则使状态发生变化。整个应用的状态保存在store中，而mutation是改变这些状态的唯一方法。举个例子：const state={ a:1 } const mutations={ change(state,n){ state.a=n; }
 } const store=newVuex.Store(...
15分钟学会vuex。State、 Getter、Mutation 、Action简述
qq_35410544的博客
12-15 1041
vuex
Vuex中Mutations修改状态
热门推荐
Yo,的博客
10-07 3万+
上篇是读取state，这篇是修改状态。即如何操作Mutations。 一.$store.commit( ) Vuex提供了commit方法来修改状态 1.store.js文件 const mutations={ add(state){ state.count++ }, reduce(state){ state.count-- ...
mutations的类型常量
jwz934738949的博客
08-11 395
mutations的类型常量 在使用mutations属性的过程中，在index.js文件中定义好mutations属性后，需要在组件中调用，使用this.$store.commit函数来调用，这种方法容易在调用mutations的函数时写错函数名 使用类型常量来进行mutations属性的调用。在store文件夹中新建js文件，名字叫做mutations-types，用来存放将要在mutations中定义的函数名 export const INCREMENT = 'increment' export
vuex中mutations与actions的使用及区别
aichi6419的博客
09-11 1691
之前写过简单的vuex应用方法,现在写一下vuex中的 actions 和 mutations的区别 Mutations mutations 必须是同步函数,为什么? 举个例子: 官方案例 mutations: { someMutation (state) { api.callAsyncMethod(() => { stat...
Vuex系列状态管理篇--Vuex（4）之Mutations和Actions
pig_is_duck的博客
03-22 561
1、Vuex – Mutations 对于 State 的 同步操作方法 在根Vuex下 单个参数 或者没有参数 定义 const mutations = { setAppName(state, name) { state.appName = name; } } export default mutations 单个参数 或者 没有参数 使用 this.$store....
前端Bootstrap+Es6+vue学习笔记
06-10
通过路由来实现单页面应用的页面切换------------前端Bootstrap Es6 vue学习笔记，内容围绕着前端开发的三大核心技术：Bootstrap、Es6和Vue.js展开。 首先，介绍了Bootstrap框架的基础环境配置。通过开发者工具的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值