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前端开发。?