vuex学习

最新推荐文章于 2024-04-06 15:45:50 发布

苟非(烧脑版)

最新推荐文章于 2024-04-06 15:45:50 发布

阅读量423

点赞数 2

文章标签：学习

本文链接：https://blog.youkuaiyun.com/qq_52683382/article/details/129962679

版权

state

作用： state是用来存数据的，唯一的公共信息源。

vuex用于非父子关系的传值与通信

在项目里安装vuex

yarn命令

yarn add vuex@3 --save

npm命令

npm install vuex

这里注意如果npm安装报错，看看版本，vue3项目输入上面的就行，vue2应该输入下面命令

（原因，默认下载与vue3匹配的vuex版本，所以下vue2匹配的vuex要自己指定版本）

npm install vuex@3.6.2 --save

本次学习以vue2项目为模板。

注意：这里我会把我学习的资料的网址和视频网站贴在后面，大家可以自行下载。

在学习的过程中，遇见的bug

1.先对照着看，自己有没有敲错，单词，代码书写的位置是否正确

2.查看终端或者控制台，把报错的提示复制，到翻译软件翻译，一般简单的，可根据翻译直接修改代码

3.把完整报错粘贴到必应（比百度好搜一点），然后一般能找到解决办法

4.实在不行，一定一定，及时询问他人，因为我们经验不足，死磕只会浪费时间。

（有用的话记得关注我哦，持续更新，爱你❤）

state

作用： state是用来存数据的，唯一的公共信息源。

在vue文件中直接使用(在return data() 里尽量减少使用这个，主要是为了防止思维惯性)

同时，对于一些经常会变化的值，也不建议这样使用，主要是无法在浏览器追踪它值的变化

使用方法：

1.直接使用

this.$store.state.变量名
//例如
this.$store.state.num

data(){
    return{
    a:10,
    b:20,
    c:this.a //这是一种错误的思想，
}
}

2.用mapState

原因：调试工具可追踪值得变化，

import {mapState} from 'vuex;



export default{

computed:{

...mapState(['num'])
}


}

mutations

作用：state数据的变化

使用方法：

1.直接用

 export default {

    methods:{
        addNum(){
            this.$store.commit('addNum',1)
        }
    }
  }

2.映射用

import { mapMutations } from 'vuex';

export default {

    methods:{
        ...mapMutations(['subNum']),
        subFn(){
            this.subNum(1);
        }
    }
  
  }

action

作用：异步修改代码，防止堵塞

使用方法：
1.直接使用

在组件页面的 $store.dispatch('store的action内定义的方法名')；

在store页面的actions 内，写异步操作，更改的数据依然要$store.commit（）修改

组件页面
<template>
    <div>
        <h3>AddItem组件</h3>
        <p>已知库存数: {{ $store.state.num }}</p>
        <button @click="addNum2">库存+1</button>
    </div>
  </template>
  
  <script>
  export default {

    methods:{
        addNum(){
            this.$store.commit('addNum',1)
        },
        addNum2(){
            console.log('调用函数');
            this.$store.dispatch('asyncAddNum')
            console.log('异步操作');
        }
    }
  }
  </script>


store/index.js 页面

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new  Vuex.Store({
    state: {
        num: 100
    },
    //修改变量的值，在此处
    mutations: {
        subNum(state,value){
            state.num -= value
        },
        addNum(state,value){
            state.num += value
        },
        setNum(state,value){
            state.num = value
        }
    },
    // 异步修改值，不会造成堵塞
    actions:{
        asyncSubNum(store){
            setTimeout(() => {
               store.commit('subNum',1)
            }, 2000);
        },
        asyncAddNum(store){
            setTimeout(() => {
               store.commit('addNum',1)
            }, 2000);
        }
    },
    modules: {}
})

export default store;

2.映射使用

import { mapActions } from 'vuex' // 引入方法

methods{

...mapActions(['actions内的要使用的方法名'])，

调用这个方法时，只需，this.方法名即可

}

<template>
    <div>
        <h3>SubItem组件</h3>
        <p>已知库存数:{{ num }}</p>
        <button @click="subFn2">库存-1</button>
    </div>
  </template>
  
  <script>
  // 映射
import { mapState } from 'vuex';
import { mapMutations } from 'vuex';
import { mapActions } from 'vuex';

  export default {
    computed:{
        ...mapState(['num'])
    },
    methods:{
        ...mapMutations(['subNum']),
        subFn(){
            this.subNum(1);
        },
        ...mapActions(['asyncSubNum']),
        subFn2(){
            console.log('调用');
            this.asyncSubNum();
            console.log('异步');
        }
    }
  
  }
  </script>

getter

作用：类似于vuex的全局计算属性

使用方法：

1.直接使用

this.$store.getters.计算属性名

2.映射使用

在vue页面，// 非完整代码
<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
      // 计算属性
      ...mapGetters(['allPrice','allCount']), 
   
  }
}

</script>

在/store/index.js页面


import Vue from 'vue';
import Vuex from 'vuex'
import axios from 'axios';

Vue.use(Vuex)

const store = new Vuex.Store({
  getters:{
        allCount(state){
            return state.goodslist.reduce((sum, obj) => {
               if (obj.goods_state === true) { // 选中商品才累加数量
                 sum += obj.goods_count;
               }
               return sum;
             }, 0)
           },
           allPrice(state){
             return state.goodslist.reduce((sum, obj) => {
               if (obj.goods_state){
                 sum += obj.goods_count * obj.goods_price
               }
               return sum;
             }, 0)
           }
    }
})


export default store;

vuex-modules

1.使用module，主要是为了防止代码全部写在一坨，不方便阅读，也不方便代码管理维护。

使用步骤

1.新建，在store/下新建modules文件夹，新建cart ,user文件

2. 直接实例化，导出


const userModule = {
    state(){
        return {
            name: "",
            age: 0,
            sex: ''
        }
    },
    mutations: {},
    actions: {},
    getters: {}
}
export default userModule

3.导入store/index.js

import userModule from './modules/user'

4. store/index.js 的modules板块

使用：只有state使用有区别

 // ...mapState({list:'goodslist'}),
    ...mapState({'list': state => state.cart.goodsList}),
    // '变量名': state => state.模板名.变量名

modules命名空间

为了防止多模块而引发的命名冲突问题

步骤1

const store = new Vuex.Store({
namespace: true

})

//开启，在/store/index.js中开启就行

步骤2：调用：开启后，所有的调用都发生改变

视频地址： 15_案例_购物车重构_定义全局getters_哔哩哔哩_bilibili

求点赞，求关注，你们的支持是我创作的动力，爱你们❤