• Vuex的使用


    1. 下载 npm i vuex@3(vue2用的是3版本的,vue3用的是4版本的)
    2. 在src文件下建立store文件夹,创建index.js文件

    index:

    1. 引入Vue和Vuex
    2. 声明使用插件Vue.use(Vuex)
    3. 向外暴露一个对象 export default new Vuex.Store({store,mutations,actions,getters})
    4. 声明对象

    state是状态的意思,其实就是数据,它是一个可以包含多个属性和属性值的对象

    以后用来存储数据

    const state = {}

    mutations也是一个对象,是一个包含一个或者多个方法的对象

    这些方法当中都是在直接操作state数据,就是对state当中的属性进行赋值操作

    不能在这些方法当中出现异步循环、判断、操作

    const mutations = {}

    actions也是一个对象,是一个包含一个或者多个方法的对象

    这里面的方法有两个作用

    1、和vue组件用户的行为进行对接

    2、把用户行为需要对数据的操作提交给mutations

    actions函数当中是可以写异步 循环  判断

    const actions = {}

    getters也是一个对象,是一个包含一个或者多个方法的对象

    它和组件当中计算属性的get道理一样,根据已有的数据计算一个没有的数据使用

    它是要根据state当中已经存在的数据,计算一个新的数据供组件当中使用

    虽然写的都是函数,函数名或者方法名其实是一个数据

    const getters = {}

    1. 在main.js当中实例化vm的时候在配置对象当中注入store

    import store from ‘@/store’,

    store

    在state当中写入数据

    const state = {

      count:0

    }

    组件对象接收:

    (1){{$store.state.count}}

    (2)在计算属性当中写函数调用

    computed: {

            count(){

            return this.$store.state.count

     }}

    组件中引用可以简写为{{count}}

    (3)使用vuex定义的接口(在computed中)

       

        mapState里面传递的参数可以是数组也可以是对象

        使用数组的时候需要符合下面两个条件

          1、组件当中数据的名称要和vuex当中数据的名称一样

          2、使用了模块化必须使用命名空间或者不适用模块化

           …mapState([‘count’])

       

         一旦上面的条件不符合,我们就不能传递数组了,传递对象

         下面这个对象写法也是有条件,条件就是不能使用模块化

         后期项目基本都要使用模块化,所以基本不用

         ...mapState({

           count1:'count'

         })

         使用了模块化,对象传递,后期这个用的贼多,它什么情况都能用

         ...mapState({

           count1:state => state.count

         })

    当需要触发事件时

    在index.js中写回调

    const mutations = {

      INCREMENT(state){

        state.count++

      }}

    const actions = {

      increment1(context){

        // context上下文 是我们store的复制品,是一个新对象,只是里面有很多属性和store属性一样

        // 即使不用也要写

        context.commit('INCREMENT')

      }}

    (mutations里面函数的第一个参数一定是state

    actions里面函数的第一个参数一定是context

    不能修改)

    在组件的methods中

        increment(){

          this.$store.dispatch('increment')

          // this.$store.commit('INCREMENT') 

          //如果单纯的就是修改数据,那么可以省略actions函数,直接提交mutations修改

          // 但是这样的情况几乎没有,所以我们还是要掌握完整的流程

    },

    和actios当中对应的方法进行对接,拧开关

    dispatch和当年我们学的emit道理是一样的,分发触发的意思

    本质是在调用对应的actions函数

    将对应的任务传给actions,需要对数据的操作提交给mutations,在mutations中进行复制操作

    <button @click="increment">点击+button>

    在getter对象里面,可以根据state当中已经存在的数据,计算出一个新数据使用

    const getters = {

      double(state){

        return state.count * 2

      }

    }

    (state函数定义的形参,是vuex给的)

      ...mapGetters({

          double: 'double'

    })

    {{double}}

  • 相关阅读:
    科学计算器网站Desmos网站
    draw.io 二次开发(idea2020) 系列(二)
    《论文阅读》R-NET: MACHINE READING COMPREHENSION WITH SELF-MATCHING NETWORKS
    基于矩阵分解算法的智能Steam游戏AI推荐系统——深度学习算法应用(含python、ipynb工程源码)+数据集(一)
    mysql中事务的基本介绍,提交事务和事务回滚的基本介绍,事务的隔离性的详细说明
    Java实现简易版的【图书管理系统】
    Ai-WB2系列模组linux开发环境搭建
    狗屎一样的面试官,你遇到过几个?
    Python基础之reduce函数
    java计算机毕业设计宠物销售网站MyBatis+系统+LW文档+源码+调试部署
  • 原文地址:https://blog.csdn.net/m0_60376759/article/details/126022082