vuex中 this.$store.dispatch() 与 this.$store.commit()方法的区别

我会带着你远行 2022-09-14 14:24 309阅读 0赞

1：**Vuex是什么？**

所谓的Vuex其实是一个为Vue.js设计的数据仓库，把各个组件公用的数据放到一个仓库里面进行统一的管理

Vuex优点：

*  既使非父子组件间的数据共享也能变得简单明了
 *  让程序变得更加可维护（将数据抽离了出来）
 *  只要仓库里面的数据发生了变化，在其他组件里面数据被引用的地方也会自动更新

**Vuex怎么用？**

先用vue-cli安装项目框架

**@vue/cli用法**

Yarn

yarn global add @vue/cli

npm

npm install -g @vue/cli

**安装Vuex**

Yarn

yarn add vuex

npm

npm install vuex --save

2：两者之间的区别，只是存取方式不同，两个方法都是传值给vuex的mutation改变state

this.$store.dispatch() ：含有异步操作（例如向后台提交数据），写法：this.$store.dispatch(‘action方法名’,值)  
this.$store.commit()：同步操作，写法：this.$store.commit(‘mutations方法名’,值)

commit同步操作

*  存储 this.$store.commit('changeValue',name)
 *  取值 this.$store.state.changeValue

dispatch异步操作

*  存储 this.$store.dispatch('getlists',name)
 *  取值 this.$store.getters.getlists

3：示例

src/store/index.js

import Vue from "vue";
    import Vuex from "vuex";
    
    Vue.use(Vuex);
    
    export const store = new Vuex.Store({
      // state专门用来保存 共享的状态值
      state: {
        // 保存登录状态
        login: false
      },
      // mutations: 专门书写方法,用来更新 state 中的值
      mutations: {
        // 登录
        doLogin(state) {
          state.login = true;
        },
        // 退出登录
        doLogout(state) {
          state.login = false;
        }
      }
    });

src/components/Header.vue

src/components/Login.vue