vuex学习笔记(持续更新中)

最新推荐文章于 2024-05-22 10:46:06 发布
最新推荐文章于 2024-05-22 10:46:06 发布
阅读量565 收藏
点赞数
分类专栏： Vue2 vuex 文章标签： 前端 vue.js vuex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51144154/article/details/121575595
版权
Vue2 同时被 2 个专栏收录
13 篇文章 0 订阅
订阅专栏
vuex
1 篇文章 0 订阅
订阅专栏

5.1理解vuex

5.1.1vuex是什么

  1. 概念：专门在Vue中实现集中式状态(数据)管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理(就是 读/写)，也是一种组件间通信方式，且适用于任意组件间的通信
  2. Github 地址：https://github.com/vuejs/vuex

5.1.2什么时候使用Vuex

1)、

  1. 多个组件依赖于同意状态
  2. 来自不同组件的行为需要变更同一状态

actions mutations state 都是对象数据类型
这三个数据都是经过store领导
所有vc都必须能看到store这样 store身上的dispatch commit 才可以在所有的组件中调用

2)、使用vuex的步骤

  1. npm i vuex 安装 vuex
  2. Vue.use(Vuex) 使用 vuex
  3. 使用store
  4. 让所有组件vc都可以看到 store

3)、搭建vuex环境

  • index.js
//该文件用于创建vuex中最为核心的store

//引入vue
import Vue from 'vue'

//引入Vuex
import Vuex from 'vuex'

//使用Vuex插件
Vue.use(Vuex)
//只要我们引入vuex并且使用了vuex，那么在我们创建vm的时就可以使用store配置项

//准备actions——用于响应组件中的动作
const actions = {}

//准备mutations——用于操作数据(state)
const mutations = {}

//准备state——用于存储数据
const state = {}

//创建并暴露store对象
export default new Vuex.Store({
    actions,
    mutations,
    state
})
  • main.js
//引入vue
import Vue from 'vue';

//引入App
import App from './App.vue';

//引入vuex
// import Vuex from 'vuex'  //第一个vuex首字母大写是为了和官方文档保持一致，当然把它小写也没关系
// 不能再main.js中使用Vuex插件是因为vue手脚架执行的顺序会把插件最后运行，所以把它放在store里了

//引入store
import store from './store/index.js'
//停止生产提示
Vue.config.productionTip = false;

//使用插件
// Vue.use(Vuex); 不能再main.js中使用Vuex插件是因为vue手脚架执行的顺序会把插件最后运行，所以把它放在store里了


//创建一个vm
const vc =new Vue({
    render: h => h(App),
    store,
    beforeCreate() {
        Vue.prototype.$bus = this;
    }
}).$mount('#app')

5.1.3Vuex的初步应用

  1. 应用vuex的开始是在组件的方法中 调用 vuex 中的 dispatch方法 api

    • dispatch( , ) 是一个函数，其中有两个参数；第一个参数是 要进行的动作类型（比如 + ）并且是个字符串，第二个参数是动作的’对象‘ （比如 2；两个参数合起来就是 加2 这个动作）
      在这里插入图片描述

  2. 使用dispatch方法后 它会把请求传递给 store/index.js中的 action ，而action中设置一个函数（以dispatch的第一个参数为函数名的函数，这个函数有两个参数：context、value(就是第一点中动作的对象)），而由于在action中，我们设置的这个函数会有 commit这个方法，commit方法 (也有两个参数) 可以把我们的动作传递给mutations

    • 说白话如果我们不把需求写在action（业务逻辑）中，都不用调用action，它只是一个中介。可以直接调用mutations，最后会给大家对比 action中有无业务逻辑的情况
      在这里插入图片描述

  3. mutations对象收到信息后开始操作数据，在mutations中建立一个函数，函数的名字为commit方法的第一个参数，而这个函数有两个参数第一个就是state, 第二个是value(就是第一点中动作的对象)

在这里插入图片描述

  • 运行图：
    在这里插入图片描述
  1. 代码
    组件中：
<template>
  <div>
    <!-- 模板语法里面可以看到vc的所有东西所以不用 this.$store. -->
    <h2>当前求和为{{ $store.state.sum }}</h2>
    <br />
    <select v-model="n">
      <!-- 
           如果不用 v-bind 那么value等于的始终是一个字符串
           但是用 v-bind 那么 value 等于的是 value内部的值
           官方说法:加了 : 1 2 3 全当js表达式去解析，不加 : 全当字符串去解析 
       -->
      <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: 2, //用户选择的数字
    };
  },

  methods: {
    increment() {
      //当我们的行为没有业务逻辑时(不用调action)，我们可以直接调用 commit直接把东西给mutations
      // 而不是调dispatch把东西给action
      //其中commit第一个参数当然是要和mutations中的函数名一致啦
      this.$store.commit("JIA", this.n);
    },
    decrement() {
      this.$store.commit("JIAN", this.n);
    },
    incrementOdd() {
      // if (this.$store.state.sum % 2) {
      //   this.$store.dispatch("jia", this.n);
      // }！！！！把业务逻辑写在action中让action有点作用把！！！
      this.$store.dispatch("jiaOdd", this.n);
    },
    incrementWait() {
      //等一等就是一个定时器
      // setTimeout(() => {
      //   this.$store.dispatch("jia", this.n);
      // }, 5000); ！！！！把业务逻辑写在action中让action有点作用把！！！
      this.$store.dispatch("jiaWait", this.n);
    },
  },
};
</script>

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

store/index.js 中

//该文件用于创建vuex中最为核心的store

//引入vue
import Vue from 'vue'

//引入Vuex
import Vuex from 'vuex'

//使用Vuex插件
Vue.use(Vuex)
//只要我们引入vuex并且使用了vuex，那么在我们创建vm的时就可以使用store配置项

//准备actions——用于响应组件中的动作
const actions = {
    // jia(context,value) {
    //     console.log('actions中的jia被调用了',context,value)
    //     context.commit('JIA',value)//context 是store中的执行上下文
    // },
    // jian(context,value) {
    //     context.commit('JIAN',value)
    // },

    jiaOdd(context, value) {
        if (context.state.sum % 2) {
            context.commit('JIA', value);
        }
    },
//如此把业务逻辑写在action中就可以让action有点作用，不然我们是可以跳过action直接调用mutations
    jiaWait(context, value) {
        setTimeout(() => {
            context.commit('JIA', value);
        },1000)
    },
}

//准备mutations——用于操作数据(state)
const mutations = {
    JIA(state,value) {
        console.log('mutations中的JIA被调用了',state,value)
        state.sum += value;
    },
    
    JIAN(state,value) {
        state.sum -= value;
    },
}

//准备state——用于存储数据
const state = {
    sum:0
}

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

5.1.3Vuex中getters的使用

  1. 概念当state中的数据需要经过加公后再使用时，可以使用getters加工。
  2. 使用步骤
    • 第一步在store.js中配置getters
      在这里插入图片描述
    • 第二步 在组件中读取数据：$store.getters.bigSum
      在这里插入图片描述

5.1.4Vuex中mapState和mapGetters的使用

  1. 四个map方法的使用
  1. mapState方法：用于帮助我们映射state中的数据为计算属性
computed:{
      //借助mapState生成计算属性：sum、school、subject(对象写法)
      ...mapState({sum:'sum',school:'school',subject:'subject'}),

    //借助mapState方法生成计算属性:sum、scholl\subject(数组写法)
    ...mapState(['sum','school','subject'])
}
  1. mapGetters方法：用于帮助我们映射getters中数据为计算属性
computed:{
    //借助mapGetters方法生成计算属性，bigSum(对象写法)
    ...mapGetters({bigSum:'bigSum'})

   //借助mapGetters生成计算属性，bigSum（数组写法）
    ...mapGetters(['bigSum'])
}
  • 这上面两个方法都是为了解决我们重复写 s t o r e . s t a t e . x x x （ 如 ： store.state.xxx （如： store.state.xxx（如：store.state.sum）
    在这里插入图片描述

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

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

//靠mapActions生成：incrementOdd、decrementWait(数组形式)
//这种形式记得插值语法中的值要和这里的 jiaOdd jianOdd 保持一致
...mapMutations(['jiaOdd','jianOdd'])
}

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

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

//靠mapActions生成：JIA、JIAN(数组形式)
...mapMutations(['JIA','JIAN'])
}
  • 注意： 在使用上述两个个方法时，若需要传递参数，则在模板中绑定事件时传递好参数否则参数是默认的事件对象。
  • 上面这两个方法是为了解决我们重复写 方法的
    在这里插入图片描述

5.1.4Vuex中多组件共享数据

  1. 多组件共享技术就是在，自己组件的 mapState方法中写入对方组件的一个传递的东西
    在这里插入图片描述
  2. 组件代码：
    1）Persons.vue
<template>
  <div>
    <h1>人员列表</h1>
    <input type="text" placeholder="请输入名字" v-model="name" />
    <button @click="addPerson">添加一个人</button>
    <ul>
      <li v-for="p in personList" :key="p.id">{{ p.name }}</li>
    </ul>

    <h3 style="color: green">上方求和为{{ sum }}</h3>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { nanoid } from "nanoid";
export default {
  name: "Person",
  data() {
    return {
      name: "",
    };
  },

  computed: {
    ...mapState(["personList", "sum"]),
  },

  methods: {
    addPerson() {
      const personObj = { id: nanoid(), name: this.name };
      console.log(personObj);
      this.$store.commit("ADD_PERSON", personObj);
      this.name = "";
    },
  },
};
</script>

<style>
</style>

2)Count.vue

    <template>
  <div>
    <!-- 模板语法里面可以看到vc的所有东西所以不用 this.$store. -->
    <h2>当前求和为{{ sum }}</h2>
    <h2>当前求和放大10倍为 {{ bigSum }}</h2>
    <h3>我在{{ school }}学{{ subject }}</h3>
    <hr />
    <h3 style="color: red">下方组件的总人数是{{ personList.length }}</h3>
    <br />
    <select v-model="n">
      <!-- 
           如果不用 v-bind 那么value等于的始终是一个字符串
           但是用 v-bind 那么 value 等于的是 value内部的值
           官方说法:加了 : 1 2 3 全当js表达式去解析，不加 : 全当字符串去解析 
       -->
      <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="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: 2, //用户选择的数字
    };
  },

  computed: {
    // mapState方法：用于帮助我们映射state中的数据为计算属性(对象写法)
    //使用这种方法的时候注意要改变插值语法中相应的值
    // ...mapState({he:'sum',xuexiao:'schoole',xueke:'subject'})

    //mapState方法：中数组写法
    ...mapState(["sum", "school", "subject", "personList"]),

    //mapGetters方法：用于帮助我们映射getters中数据为计算属性(对象写法)
    // ...mapState({bigSum:'bigSum'}),

    //mapGetters方法中数组写法
    ...mapGetters(["bigSum"]),
  },

  methods: {
    // 程序员亲自写方法,把 this.n 这个参数传递给JIA JIAN 这两个方法
    // increment() {
    //   this.$store.commit("JIA", this.n);
    // },
    // decrement() {
    //   this.$store.commit("JIAN", this.n);
    // },

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

    //借助mapMutation生成对应方法，方法重会调用commit去联系mutations(数组写法)
    // ...mapMutations(['JIA','JIAN']),

    // *******************************************************

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

    //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)
    // 注意这种写法的插值语法对应的里面的值要改成 jiaOdd  和 jiaWait
    ...mapActions(["jiaOdd", "jiaWait"]),
  },

  mounted() {
    console.log("Count", this.$store);
  },
};
</script>

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

3)index.js

//该文件用于创建vuex中最为核心的store

//引入vue
import Vue from 'vue'

//引入Vuex
import Vuex from 'vuex'

//使用Vuex插件
Vue.use(Vuex)
//只要我们引入vuex并且使用了vuex，那么在我们创建vm的时就要使用store配置项

//准备actions——用于响应组件中的动作
const actions = {
    // jia(context,value) {
    //     console.log('actions中的jia被调用了',context,value)
    //     context.commit('JIA',value)//context 是store中的执行上下文
    // },
    // jian(context,value) {
    //     context.commit('JIAN',value)
    // },

    jiaOdd(context, value) {
        if (context.state.sum % 2) {
            context.commit('JIA', value);
        }
    },
//如此把业务逻辑写在action中就可以让action有点作用，不然我们是可以跳过action直接调用mutations
    jiaWait(context, value) {
        setTimeout(() => {
            context.commit('JIA', value);
        },1000)
    },
}

//准备mutations——用于操作数据(state)
const mutations = {
    JIA(state,value) {
        console.log('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: 9,
    school: '尚硅谷',
    subject: '前端',
    personList: [
        {id:'001',name:'张三'}
    ]
}

// 准备getters用于将state中的数据进行加工(getters中有state这个参数)
const getters = {
    bigSum(state) {
        return state.sum*10
    }
}



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

//暴露store
// export default store  这样过于繁琐 直接去创建的时候一起暴露得了

5.1.5Vuex模块化＋namespaced

  1. 使用背景：当我们有多个模块需要配置 actions mutations state getters时，可以使用这种方法

在这里插入图片描述

  • 添加namespaced = true的目的是让组件可以通过模块的名字使用到该模块中的配置，如:
    ①简写形式示例：
    在这里插入图片描述
    ①原生形式示例：
    在这里插入图片描述
  • 模块化编码＋命名空间的好处：
    可以解决命名冲突，2可以分门别类的让我们在不同的js文件夹中写不同的模块配置
林之.
关注
专栏目录
vue学习笔记
11-22
本学习笔记将涵盖Vue的基础概念、核心特性以及常见应用场景，帮助初学者建立起对Vue的全面理解。 一、Vue.js简介 Vue.js的核心理念是通过声明式的模板语法来简化DOM元素的更新，实现数据驱动视图。它采用MVVM...
47 - vuex - 分模块
m0_58250910的博客
09-20 615
store.dispatch('模块名/xxx' , 额外参数)$store.commit('模块名/xxx'，额外参数)mapMutations('模块名',['xxx'])mapActions('模块名', ['xxx'])mapGetters('模块名', ['xxx'])$store.getters['模块名/xxx']mapState('模块名',[xxx])$store.state.模块名.xxx。会集中到一个比较大的对象。
关于Vuex的拆分和分模块组织管理
qq_50950033的博客
07-23 1533
VueX的拆分和分模块组织管理
vuex分模块的使用
m0_51055743的博客
08-12 1194
vuex
5分钟搞懂vuex(MarkSheng)
Mark Sheng的博客
02-26 182
先说一下vuex到底是什么？ vuex 是一个专门为vue.js应用程序开发的状态管理模式。 这个状态我们可以理解为在data中的属性，需要共享给其他组件使用的部分。 也就是说，是我们需要共享的data，使用vuex进行统一集中式的管理。 vuex中，有默认的五种基本的对象： state：存储状态（变量） getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun() mutations：修改状态，并且是同步的。在组.
new Vuex.Store 时 Store 一定要首字母大写
桃花岛主的博客
06-09 825
用vuex的时候， export default new Vuex.Store ({ modules:{ goods_create } }) store 的
vue2.0学习笔记文件.zip
01-13
这份“vue2.0学习笔记文件.zip”包含了作者在学习Vue2.0过程中的笔记和相关项目文件，虽然缺少了某些特定的案例和依赖，但它仍能为我们提供宝贵的参考。 首先，`web.config`可能是用于Web应用程序配置的文件，通常...
VueBasicLearning:Vue 2.0学习笔记
03-16
以上只是Vue 2.0基础知识的一部分，实际开发中，你还需要学习更多高级特性和最佳实践，例如Vuex的状态管理、Vue CLI的使用、Vue Server Side Rendering等。持续学习和实践，你将成为Vue开发的专家。
前端学习笔记
02-01
本压缩包文件“前端学习笔记”提供了全面的前端技术学习资源，涵盖了HTML5、CSS、JavaScript以及一些流行的前端框架，如Angular和Vue。以下是这些知识点的详细讲解： 1. HTML5： HTML（超文本标记语言）是网页内容...
记录日常工作中遇到的问题，前端学习笔记，奇淫技巧、面试真题等，长期更新.zip
03-16
这份"记录日常工作中遇到的问题，前端学习笔记，奇淫技巧、面试真题等，长期更新.zip"压缩包文件，显然是一个宝贵的资源库，涵盖了前端开发者在实际工作和面试过程中可能遇到的关键知识点。 一、面试技巧 面试不仅...
详解vuex之store拆分即多模块状态管理(modules)篇
10-17
主要介绍了详解vuex之store拆分即多模块状态管理(modules)篇，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vuex分模块后,实现获取state的值
10-15
主要介绍了vuex分模块后,实现获取state的值，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vuex的理解使用
qq_43599621的博客
12-12 350
Vuex 1、state 直接通过this.$store.state.名称调用 <template> <div class="about"> <h4>这是about组件：拿到了{{this.$store.state.str}}</h4> <button><router-link to="/">home</router-link></button> </div> </t
vuex载入vue时store首字母不可大写
ixx_0的博客
04-21 623
在一次使用vuex中突然报以下错误 TypeError: Cannot read property 'commit' of undefined at VueComponent.mappedMutation (vuex.esm.js?ed0c:906) at VueComponent.selectSinger (search-suggest.vue?adea:110) at ...
vuex中五个模块
mgaga的博客
12-17 572
vuex
vuex分模块存储
m0_62134648的博客
02-12 170
vuex分模块存储
Vuex详细使用(包含分模块开发)
最新发布
weixin_54673155的博客
05-22 558
目录Vuex概述state状态概念​编辑mapState辅助函数Mutations概念携带单个参数携带多个参数mapMutations辅助函数action概念mapActions辅助函数getters概念module模块概念模块state访问模块getters访问模块mapMutations访问模块mapActions访问
数据仓库-vuex-分模块
ly1477868382的博客
12-05 419
vuex
vuex模块的简单使用以及五大方法的调用方式
m0_47435082的博客
11-19 4628
vuex的分模块使用和State和Action等方法的使用
Python学习笔记：重温与更新
笔记的编写过程展示了作者严谨的态度和持续学习的精神，同时也为其他Python学习者提供了一个参考和进阶的资源。 读者可以通过邮箱qyuhen@hotmail.com或QQ号1620443与作者取得联系，获取最新的更新版本。由于本书是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值