vue学习简记（十一）Vuex

已于 2022-07-28 18:56:31 修改
阅读量317 收藏
点赞数
分类专栏： vue相关 文章标签： vue.js 学习 javascript
于 2022-07-28 18:55:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43178432/article/details/126018358
版权

vue学习简记（十一）

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使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

1~6综合例子图示：
请添加图片描述
components/Count.vue

<template>
    <div class="count">
        <h1>当前求和为：{{sum}}</h1>
        <h2>当前求和乘以2为：{{bigSum}}</h2>
        <h3>{{people}}的朋友有{{friends.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="increament">+</button>
        //<button @click="decreament">-</button>
        //<button @click="increamentOdd">当前求和为奇数再加</button>
        //<button @click="increamentWait">等一等再加</button>
        -->
        <button @click="increment(n)">+</button>
        <button @click="decrement(n)">-</button>
        <button @click="jiaOdd(n)">当前求和为奇数再加</button>
        <button @click="jiaWait(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:'sum',people:'people',friend:'friend'}),

			//借助mapState生成计算属性，从state中读取数据。（数组写法）
			...mapState(['sum','people','friends']),

            //同上两种写法，还是数组写法比较简便
            ...mapGetters(['bigSum']),
        },
        methods:{
            //一般写法
            // increament(){        
            //     this.$store.commit('JIA',this.n)
            // },
            // decreament(){
            //     this.$store.commit('JIAN',this.n)
            // },
            //******************************************需要在click定义那里传参
            //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
			...mapMutations({increment:'JIA',decrement:'JIAN'}),
			//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)
			// ...mapMutations(['JIA','JIAN']),

            //一般写法
            // increamentOdd(){
            //     this.$store.dispatch('jiaOdd',this.n)
            // },
            // increamentWait(){
            //     this.$store.dispatch('jiaWait',this.n)
            // },
            //******************************************
            //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
			// ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),
			//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)
			...mapActions(['jiaOdd','jiaWait'])
        }
       
    }
</script>

<style scoped>
    button{
        margin-left: 5px;
    }
</style>

components/People.vue

<template>
  <div>
    <h2>{{people}}的朋友信息：</h2>
    <input type="text" v-model="name">
    <button @click="add">添加朋友</button>
    <ul>
        <li v-for='(it,index) in friends' :key = 'index'>
            {{index+1}}--{{it}}
        </li>
    </ul>
  </div>
</template>

<script>
import { mapState,mapMutations} from 'vuex'
export default {
    name:'People',
    data(){
        return{
            name:''
        }
    },
    computed:{
        ...mapState(['people','friends'])
    },
    methods:{
        // ...mapMutations(['add'])
        //如果直接用上面的传数据，则传入的为object PointerEvent
        add(){
            this.$store.commit('add',this.name)
            this.name=''
        }
    }

}
</script>

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const actions = {
    jiaOdd(context, value) {
        console.log('actions中的jiaOdd被调用了')
        if (context.state.sum % 2) {
            context.commit('JIA', value)
        }
    },
    jiaWait(context, value) {
        console.log('actions中的jiaWait被调用了')
        setTimeout(() => {
            context.commit('JIA', value)
        }, 500)
    }
}
const mutations = {
    JIA(state, value) {
        console.log('mutations中的JIA被调用了', state, value)
        state.sum += value
    },
    JIAN(state, value) {
        console.log('mutations中的JIAN被调用了')
        state.sum -= value
    },
    add(state, value) {
        console.log(value)
        state.friends.unshift(value)
    }
}
const state = {
    sum: 0, //当前的和
    people: '张三',
    friends: ['李四']
}
const getters = {
    bigSum(state) {
        return state.sum * 2
    }
}
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

App.vue

<template>
	<div>
		<Count></Count>
		<hr>
		<People></People>
	</div>
</template>

<script>

import Count from './components/Count.vue'
import People from './components/People.vue'
	

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

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'}),
Sonder,
关注
专栏目录
Vue3 学习——vue中使用vuex(超详细)
敲代码的小李同学的博客
07-18 3万+
Vue 中 Vuex 的介绍与项目实操应用。
【Vue】高级系列（十）vuex - 状态自管理应用 - state - view - actions
YK菌的博客
02-26 2240
学习Vuex
vuex的使用方法
bamboozjy的博客
07-31 981
1.安装依赖  npm i vuex -D 2.在src下新建store文件夹，并此文件夹下新建store.js，文件内容为： import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); var store = new Vuex.Store({ state: { arr: [], msg: "bamb...
Vuex
weixin_38170065的博客
09-06 565
1. vue中各个组件之间传值 1.父子组件 父组件-->子组件，通过子组件的自定义属性：props 子组件-->父组件，通过自定义事件：this.$emit('事件名',参数1,参数2,...); 2.非父子组件或父子组件 通过数据总数Bus，this.$root.$emit('事件名',参数1,参数2,...) 3.非父子组件或父子组件 更好的方式是在...
vuex使用
jomes_wang的博客
06-13 3612
1. vuex简介vuex是专门用来管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起，集中式来管理。需要声明的是，这里所说的状态指的是vue组件中data里面的属性。了解vue的同学应该是明白data是怎么回事的吧，如果不懂的话，建议先学完vue的基础知识再看vuex。 2. vuex的组成结构示意图vuex的特点是把数据单独隔离，形成一棵树状图。单独隔离就意味...
vuex使用方法（详细实用）
热门推荐
前端学习笔记
05-22 1万+
vuex用法
Vuex 在Vue 组件中获得Vuex 状态state的方法
12-02
在Vue.js应用中，Vuex是一个强大的状态管理库，它遵循单一状态树原则，将所有应用层级的状态集中管理，提供了一种有序、可预测的方式来处理组件间的共享状态。Vuex的状态存储是响应式的，这意味着当状态改变时，依赖...
vue实现将数据存入vuex中以及从vuex中取出数据
10-16
Vue.js 是一款流行的前端框架，而 Vuex 是 Vue 的状态管理库，它帮助开发者集中管理和共享应用的状态。在大型 Vue 项目中，Vuex 可以有效地解决组件间的数据通信问题，使得状态管理更加有序和可追踪。本篇文章将详细...
深入理解基于vue-cli的vuex配置
08-29
深入理解基于vue-cli的vuex配置 基于vue-cli的vuex配置是Vue.js生态系统中的一個重要组件，vuex是vue的状态管理工具，可以帮助开发者更好地管理应用程序中的状态。下面是基于vue-cli的vuex配置的详细介绍： 一、...
Vuex的使用
nunumaymax的博客
06-09 7412
Vuex是 Vue 的共享状态管理，小型项目使用 store模式 即可，中大型项目需要使用 VueX。mapState, mapGetters ：写在computed中；mapMutations, mapActions ：写在methods中。state: 变量；getters: state的计算属性；mutations: 同步；actions: 异步。state: 如果在模块中定义，则为局部的state；getters: 如果在模块中定义，则为局部的getters；
Vuex使用方法详解
weixin_44520088的博客
03-10 2580
Vuex 定义 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 什么是“状态管理模式” new Vue({ // state data () { return { count: 0 } }, // view template: ` <div>{{ count }}</div> `, // actions me
Vuex 的基本用法
一名努力学习前端的大三学生
03-06 5383
一、Vuex 概述 1.1 传统的组件之间的共享数据方式 父向子传值： v-bind 子向父传值：v-on 兄弟组件之间共享数据：EvenBus $on 接受数据的那个组件 $emit 发送数据的那个组件 缺点：只能通过父传子 和 子传父的方式传值，若想要两个毫无关系的组件传值则很繁琐（需要找到 他们之间的关系） 1.2 Vuex是什么 vuex 是实现组件全局状态管理的一种机制，可以方便组件之间的数据共享 二、Vuex初始化 store.js import Vue fro
Vuex的全面用法总结
shi15926lei的博客
07-20 4877
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。需要声明的是，这里所说的状态指的是vue组件中data里面的属性。Vuex 是什么？| Vuex。
Vuex的基本用法
不想学习的打工人的博客
08-26 268
在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。
jdbc调用存过
我的小窝
06-09 404
1.概述     CallableStatement用来运行SQL存储过程。存储过程是数据库中已经存在的SQL语句，它通过名字调用。CallableStatement是PreparedStatement的子类。     CallableStatemnet中定义的方法用于处理OUT参数或INOUT参数的输出部分,     2.创建CallableStatement对象           Cal
vuex基本使用方法
最新发布
stella_stella123的博客
09-11 227
Vuex允许Store分成不同模块，每个模块都拥有自己的state，getter，mutation，action。Action处理的是异步任务，异步任务必须通过Action触发Mutation方法改变状态，不能直接使用Mutation直接对异步任务进行修改。Getter类似于计算属性，数据来源于Vuex中的State，Vuex中的数据需要简单包装处理由计算属性Getter来完成。store中的状态不能直接进行操作，我们使用mutation对store中的状态进行修改，便于监听数据的变化。
vuex详细介绍和使用方法
weixin_30808253的博客
01-24 240
1.什么是vuex？ 官方的解释： Vuex是一个专为Vue.js应用程序开发的状态管理模式 当项目比较庞大的时候，每个组件的状态比较多，为了方便管理，需要把组件中的状态抽取出来，放入Vuex中进行统一管理。常用的登录，购物车等一下数据的存储 State：唯一的数据源，我们需要把任何一个组件中需要抽取出来的变量放入到state中去 Getters：通过Getters可以派生...
VueX使用方法
Byte_Dance的博客
10-20 421
(1):首先安装VUEX : npm install vuex --save (2):然后再main.js里引入vuex:      import Vuex from "vuex"      Vue.use(Vuex) (3):然后再创建一个store对象 const store = new Vuex.Store({ state: { count: 10 ...
"Vue的状态管理vuex详解及使用方法
Vue的状态管理vuex使用方法详解 在Vue中，当访问数据对象时，一个Vue实例只是简单的代理访问。因此，如果有一处需要被多个实例间共享的状态，可以通过维护一份数据来实现共享。例如，可以创建一个sourceOfTruth对象...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值