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

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

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

---

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

---

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

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

---

这个是入口文件，我们在里面引入了刚刚那个自定义组件，它是【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前端开发。