Vuex核心属性

——~

于 2022-09-13 16:33:22 发布

阅读量245

点赞数

分类专栏： JS 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_51701698/article/details/126833462

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在Vue应用中使用Vuex进行状态管理和组件间通信，包括state、mutations、getters和actions的使用方法，以及模块化的实践。涵盖了核心概念和实际操作，适合Vue初学者和进阶者参考。

摘要由CSDN通过智能技术生成

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

Vue.use(Vuex)

export default new Vuex.Store({
    state:{
        uname:'张三'，
        age:18
    },
    mutations:{
    },
    getters:{
    },
    actions:{
    },
    modules:{
    }
})

state:存储在这里的属性，可以全局组件中使用。

使用方法：

//这是组件
<template>
    <div>
       <!-- vuex的state中值使用时有两种方式  -->
       <!-- 方式一：直接使用 -->
       <div>{{$store.state.uname}}</div>
       <!-- 方式二：引入式 -->
       <div>{{uname}}</div>
    </div>
</template>

<script>
//通过mapState引入state中的内容
import {mapState} from 'vuex
    export default {
        //在计算属性computed中解出uname
        computed: {
            ...mapState(['uname'])
        }，
    }
</script>

mutations:将修改state中的值的方法放在这里。

//vuex中：
mutation:{
    //比如一个修改年龄的方法
    updateAge(state,payload){
    //payload : 变量名随意，统称为--载荷
    state.age = payload
    }
}


//这是组件
<template>
    <div>
       <button @click="changAge">更新年龄{{age}}</button>
    </div>
</template>

<script>
//通过mapState引入state中的内容,通过mapMutations引入mutation中的方法
import {mapState,mapMutations} from 'vuex
    export default {
        //在methods创建一个点击事件（方法）
        methods:{
            //方法一：
            changAge(){
            //普通方法：this.$store.commit('要修改值的参数名',要修改的值)
            this.$store.commit('updateAge',20)
            },
            //方法二：
            changAge(){
                //通过this直接调用通过mapMutations引入mutation的方法。
                this.updateAge(20)
            }
        }
        //在计算属性computed中解出age
        computed: {
            ...mapState(['age'])
        },
    }
</script>

getters:计算属性--利用state中已有的值，计算得到新的值。

//vuex
export default new Vuex.Store({
    state:{
        uname:'张三'，
        age:18
    },
    getters:{
        //需求：年龄乘2
        age_db(state){
        return state.age * 2
        }
    }
})
//组件使用时：
<template>
    <div>
      //使用方式一：直接使用
      <div>计算属性:{{$store.getters.age_db}}</div>
      //使用方式二：通过引入的放式使用
      <div>计算属性:{{age_db}}</div>
    </div>
</template>

<script>
//通过mapGetters引入getters中的方法age_db
import {mapGetters} from 'vuex
    export default {
        //在计算属性computed中解出age_db
        computed: {
            ...mapGetters(['age_db'])
        }
    }
</script>

actions:存放网络请求相关操作.。适用场景：请求的数据在多个组件中都要使用。

//vuex中

import Vue from 'vue'
import Vuex from 'vuex'
//在js文件中，用axios只能单独引入，在.vue文件中可以使用this.axios
import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
    state:{
        //在vuex中发送请求后，数据通常是用于多组件渲染的
        news_data:null
    },
    mutations:{
        //修改state中的值必须用mutation中的方法
        updateNewsData(state,payload){
            state.news_data = payload    
        },
    },
    actions:{
        //例如：获取新闻
        getNews(store,payload){
            //参数store：就是vuex的对象
            //payload：荷载，用于传参
            let url = 'https://api.apiopen.top/getWangYiNews'
            axios.get(url).then(res=>{
            consle.log(res);
            //触发mutations中的方法，必须用commit
            store.commit('updateNewsData',res.data)
            })
        }
    }
})

//组件中:
<template>
    <div>
      <button @click="getData">请求数据</button>
    </div>
</template>

<script>
<!--方法二：通过mapActions引入getters中的方法getNews -->
import {mapActions,mapState} from 'vuex
    export default {
        methods:{
            //方法二：
            ...mapActions(['getNews'])
            getData(){
                //方法一：
                //‘参数’会传递到vuex中getNews的payload参数中，在没有参数传递时可不写。
                this.$store.dispatch('getNews',参数)
                //方法二：
                this.getNews(参数)
            }
        }
        //在计算属性computed中解出age_db
        computed: {
            //获取age_db方法
            ...mapGetters(['age_db'])
            //获取state中的news_data
            ...mapState(['news_data'])
        }
    }
</script>

actions使用总结：

1、在actions中添加方法，发送请求；

2、在state属性中添加属性保存请求的返回值；

3、mutations属性中，添加方法更新state中的值；

4、请求结束后，触发mutations中的方法，来把请求得到的值更新到state中。

modules：用于大型项目拆分模块时使用。

使用方式：在store文件下创建与index.js同级文件，这里创建的是user.js。

//user.js
//例如此处是项目分割出的用户模块
export const user_md = {
    state:{
        phone:'12306'
    },
    mutations:{},
    getters:{},
    actions:{}
}

//index.js -- vuex主文件
import Vue from 'vue'
import Vuex from 'vuex'
//引入用户模块
import  {user_md} from './user'

export default new Vuex.Store({
    state:{},
    mutations:{},
    getters:{},
    actions:{},
    modules:{
        //加载外部引入的子模块
        user_md    
    }
})