vuex的操作流程

最新推荐文章于 2024-09-20 22:35:21 发布

Razas

最新推荐文章于 2024-09-20 22:35:21 发布

阅读量852

点赞数

分类专栏：【Vue组件的封装】文章标签： vuex

本文链接：https://blog.csdn.net/qq_25354709/article/details/90050858

版权

本文详细介绍了在Vue CLI v3.7.0初始化的项目中，如何使用Vuex进行状态管理。首先在store.js中定义方法，接着在main.js中引入并调用这些方法，然后在具体的.vue组件中调用store中的方法和公共属性。通过dispatch触发actions，actions再commit到mutations以更新状态，实现组件间的通信。

摘要由CSDN通过智能技术生成

用Vue CLI v3.7.0 初始化一个Vue的项目之后。
默认已经安装好了 vuex。
我们只需要在 store.js中书写，就可以。

1.在store.js 里面写方法

在 store.js 里面的 actions中，写方法。
store.js:

import Vue from 'vue'
import Vuex from 'vuex'
import {login, validate} from './api/user/user.js';
import {setLocal} from './libs/local';

Vue.use(Vuex)

export default new Vuex.Store({
  //公共状态
  state: {
    //是否显示loading
    isShowLoading: false,
    //用户登录后的用户名
    username: '123'
  },
  //修改状态
  //可以在其他文件，使用 store.commit 去调用 showLoading方法
  mutations: {
    //显示loading
    showLoading(state){
      state.isShowLoading = true
    },
    //隐藏loading
    hideLoading(state){
      state.isShowLoading = false
    },
    setUser(state, username){
      state.username = username;
    }
  },
  //动作，这里面存放着接口调用
  actions: {
    async toLogin({commit}, username) {  //怎么调用&#