vuex使用简易版

最新推荐文章于 2023-01-05 15:19:16 发布

原创最新推荐文章于 2023-01-05 15:19:16 发布 · 401 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vuex

vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种简单的Vuex使用方案，适用于仅需管理少量状态（如昵称和购物车计数）的应用场景。通过main.js文件展示了如何安装Vuex并配置状态、变更方法等，同时说明了如何在Vue组件中调用这些方法来更新状态。

这里分享vuex的2种使用场景

场景1：vuex管理数据简单只有两三个状态需要被管理

使用方案

main.js

import Vue from 'vue';
Vue.use(Vuex);
const store=new Vuex.Store({
    state:{                                  //定义初始值，也就是需要被vuex管理的值
        nickName:'admin',
        cartCount:0
    },
    mutations:{                               //定义改变vuex中值得方法
        updateUserInfo(state,nickName){
            state.nickName=nickName
        },
        updateCartCount(state,cartCount){
            state.cartCount+=Number(cartCount)
        },
        initCartCount(state,cartCount){
            state.cartCount=cartCount
        }
    }
});

new Vue({
    el: '#app',
    router,
    store,  //注册到vue实例中
    template: '<App/>',
    components: { App }
});

vue组件中使用

this.$store.commit('updateCartCount',cartCount)  //更新vuex中的cartCount,也就是需要更新vuex中的数据的时候调mutations中的方法并且传入新值用this.$store.commit('mutations中的方法名',新值)

computed:{
  nickName(){
    return this.$store.state.nickName
  },
  cartCount(){
    return this.$store.state.cartCount
  }
},                                            //需要获取vuex中的变量，并且挂载到dom上的时候，直接用计算属性，实时计算用this.$store.state.需要使用的变量

完整版查看https://blog.youkuaiyun.com/github_39274378/article/details/81542610