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

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各个属性的具体使用方法。

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

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

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

<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里面的代码情况。

export default{
    setCount(state,data){
        return state.count *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
    }

}

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

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

yrldjsbk

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