vuex前端开发,看完这篇文章透彻明白vuex几大属性

发布时间:2024年01月20日

vuex前端开发,看完这篇文章透彻明白vuex几大属性!花费了长达2个多小时的时间,分享了这个文章给大家,帮助大家,快速掌握了解,何谓vuex.以及,它里面的几个大的属性都是什么意思,如何运用!都有案例代码。

声明:以下代码风格,是按照vue3的组合式api开展的。请大家知悉。


<script setup>
import {useStore} from 'vuex'
import {computed} from 'vue'
/**
 * 混合学习钱情提要
 * 1:state 。等同于一个共享的数据对象载体,里面可以存储一些共享的数据信息。可以是简单的,也可以是符合对象
 * 2:getters。等同于计算属性,仅仅是对共享数据进行逻辑运算,并不会修改共享数据本身。
 * 3:mutations。如果想修改共享数据,就得依靠mutations里面的方法了。但是它是同步执行。
 * 4:actions。如果异步执行修改,比如ajax请求,或者定时器函数等,需要借助于actions来封装一下。
 * 5:
 */
//1:    拿到store对象
let store = useStore()
//2:    通过store对象,拿到state对象,就可以获得它里面的值了。
const userInfo = store.state.userInfo
const keybordPrice = store.state.count
//3:    getters的调用,封装到了计算属性内使用。
const gettersHandle = computed(()=>{
    //通过store对象就可以直接拿到getters对象,进而获取里面的方法了。
    //getters用于对state中的数据进行处理,但不会修改state中的数据,相当于计算属性.
    return store.getters.setCount
})
//4:    mutations 的基础练习
const btnMutationHandle = ()=>{
    //通过store.commit()调用mutations中的方法
    store.commit('btn')
}
const btnMutationHandle2 = ()=>{
     store.commit('changeUserSalry',5000)
}
/**
 * 5:   actions 的基础练习
 *  通过store.dispatch调用actions中的方法
 */
const actionsHandle= ()=>{
    store.dispatch('changeCount',3000)
}
</script>
<template>
    <h3>Vuex混合练习2</h3>
    <p>直接调用state值-vue2的模式-键盘单价:{{ $store.state.count }}</p>
    <p>直接调用state值-vue3的模式:键盘单价:{{ keybordPrice }}</p>
    <hr />
    <p>循环遍历state的集合对象</p>
    <ul>
        <li v-for="(item,index) in userInfo" :key="index">{{ item }}</li>
    </ul>
    <hr />
    <p >getters方法计算state的数据:{{ gettersHandle }}</p>
    <p>经过getters计算之后的state数据情况:{{ store.state.count }}</p>
    <hr/>
    <button @click="btnMutationHandle">调用mutations的方法</button>
    <br />
    <button @click="btnMutationHandle2">Mutations来修改state数据-员工工资增加5000</button>
    <hr />
    <button @click="actionsHandle">actions的操作按钮-每秒增加一次count</button>
</template>

如图,这个是核心的自定义组件代码内容。里面写了很多注释文字帮助大家了解vuex各个属性的具体使用方法。


如图,这个是我本地运行起来的效果图,所有代码都是正常执行的。

大家可以在自己机器上跑起来试试看。


<template>

  <h3>入口文件</h3>
  <!-- <Base /> -->
  <!-- <SetupDemo /> -->
  <!-- <ReactiveDemo /> -->
  <!-- <ComputedDemo /> -->
  <!-- <WatchDemo /> -->
  <MutationsDemo />

</template>

<script setup>
import Base from './components/Base.vue'
import SetupDemo from './components/SetupDemo.vue'
import ReactiveDemo from './components/ReactiveDemo.vue'
import ComputedDemo from './components/ComputedDemo.vue'
import WatchDemo from './components/WatchDemo.vue'
import MutationsDemo from './components/MutationsDemo.vue'
</script>

这个是入口文件,我们在里面引入了刚刚那个自定义组件,它是【MutationsDemo.vue】。

声明:虽然名字叫做这个,但是里面的内容很齐全。请不要误会。我只是为了懒省事,当成一个混合练习插件使用了。名字我懒得修改了。


export default{
    count:99,
    userInfo:{
        name:'admin',
        age:24,
        slary:10000
    }
}

这个是state.js里面的代码情况。

state.js是我定义了一个单独存放共享数据的文件,里面有一个基础数据类型,一个符合数据类型。


export default{
    setCount(state,data){
        return state.count *10
    }
}

?getters.js文件,里面我只写了一个简单的方法,修改购物车的数量,增加10倍。


export default{
    btn(){
        alert('触发了mutations 的方法')
    },
    changeUserSalry(state,data){
        //第一个参数是固定的,第二个参数是自定义
        //不需要写return .
        alert('旧工资:'+(state.userInfo.slary)+'最新工资:'+(state.userInfo.slary  += data) )
    },
    addCount(state,data){
        //修改state里面的count值。data是自定义参数。state是默认的参数。
        state.count += data
    }

}

?mutations.js文件里面内容稍微有点多,因为要测试它的各种效果和调用方式。第一个是简单的触发里面方法。第二个同步调用执行里面的方法,会修改state里面的值。第三个是配合异步actions操作的方法。也会修改state里的值。


export default{
    changeCount(context,val){
        setTimeout(()=>{
            context.commit('addCount',1)
        },val)
    }
}

?actions.js文件里面只写了一个方法。里面有一个定时器。可以接收一个外部的参数,客户可以自定义定时器执行的间隔时间。比如间隔1000毫秒后。执行里面的回调函数。购物车数量增1.


这个是比较全面的混合练习。vuex初学者非常值得收藏,欢迎大家交流vue前端开发。?

文章来源:https://blog.csdn.net/yrldjsbk/article/details/135669658
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。