Vuex的使用--快速入门

Vuex是一个专为Vue.js应用程序开发的状态管理工具。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

一、Vue组件传值的方式

• 父向子组件传值：父组件v-bind（缩写：）属性绑定，子组件props接收
• 子向父组件传值：子组件$emit触发，父组件v-on（缩写@）事件绑定
• 兄弟组件之间数据共享：EventBus

二、关于Vuex

Vuex是适用于在Vue项目开发时使用的状态管理工具。如果一个项目开发中频繁的使用组件传参的方式来同步data的值，一旦项目变得很庞大，管理和维护这些值将是非常复杂的工作。Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——Vuex。在项目中，我们只需把这些值定义在Vuex中，就可以在Vue项目的组件中使用。

三、Vuex的安装

1.下载vuex: npm install vuex --save
2.在项目根目录下新建一个store文件夹，在文件夹内新建index.js,初始化Vuex:

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const store = new Vuex.Store({
  state: {count: 1000}
})

export default store;

3.将store挂载到vue实例中，在main.js中添加：

import Vue from 'vue';
import store from './store/index'
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;


new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

4.在组件中使用vuex
（1）将state中定义的count拿来在h1标签中显示：

<template>
    <div id='app'>
        <h1>{{ $store.state.count}}</h1>
    </div>
</template>

（2）或者要在组件方法中使用：

  created() {
    console.log(this.$store.state.count)          // 打印出1000
  }

四、Vuex的核心概念

4.1 核心概念的描述

• State：存储应用状态数据的对象，与vue中data类似
• Getters：类似vue的计算属性，store中数据的变化，getters的数据也会发生变化
• Mutations： 提交mutation来修改store中的状态，同步操作
• Actions：与mutations类似，提交修改state的行为，处理异步任务（提交的是mutation，不是直接修改状态）
• Modules： 模块化状态管理，为了开发大型项目，方便状态管理而使用的

4.2 工作流程

image.png

• 首先，vue组件调用某个Vuex的方法过程中需要向后端请求时或者出现异步操作时，需要dispatch Vue中的actions方法，以保证数据的同步。actions的存在是为了让mutations中的方法能在异步操作中起作用。
• 如果没有异步操作，我们可以直接在组件内提交状态中的mutations里自己编写的方法来完成对state成员的操作。不建议在组件中对state直接进行操作（如：ths.$store.count = 1）。这样的话不能被VueDevtools所监控到。
• 最后被修改后的state成员会被渲染到组件的原位置当中去。

4.2.1 mutations

（1）定义mutations

const store = new Vuex.Store({
  state: {
    count: 1000
  },
  mutations: {
    add(state,step){
      // 变更状态
      state.count += step;
    }
  }
})

export default store;

（2）触发mutations

  methods: {
    changeEvent() {
      // 触发mutations，可以通过mutations传递参数
      this.$store.commit('add',5);
    }
  }

点击按钮如下：

image.png

4.2.2 actions

用于处理异步任务。
（1）定义actions

const store = new Vuex.Store({
  state: {
    count: 1000
  },
  mutations: {
    // 只有 mutations 中定义的函数，才有权利修噶 state 中的数据
    add(state,step){
      // 变更状态
      state.count += step;
    }
  },
  actions: {
    addAsync(context,step) {
      setTimeout(() => {
        context.commit('add',step)
      },3000)
    }
  }
})

export default store;

（2）触发actions

      this.$store.dispatch('addAsync',5);

点击异步按钮延时数据才会变化：

image.png

4.2.3 getters

Getter 用于对 Store 中的数据进行加工处理形成的新的数据。

1. Getter类似vue的计算属性
2. Store中数据的变化，Getter的数据也会发生变化
   (1）定义getters

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 1000
  },
  mutations: {
    // 只有 mutations 中定义的函数，才有权利修噶 state 中的数据
    add(state,step){
      // 变更状态
      state.count += step;
      // 不要在mutations函数里，执行异步代码
      // setTimeout(() => {
      //   state.count++
      // }, 3000)
    }
  },
  actions: {
    addAsync(context,step) {
      setTimeout(() => {
        context.commit('add',step)
      },3000)
    }
  },
  getters: {
    showNum: state => {
      return `当前的新数据是【${state.count}】`
    }
  }
})

export default store;

（2）使用getters

 <template>
  <div class="content">
    <img alt="Vue logo" src="../assets/logo.png">
    <div>当前最新count值：{{$store.state.count}}</div>
    <div>getters: {{$store.getters.showNum}}</div>
    <button @click="changeEvent1">触发同步按钮</button>
    <button @click="changeEvent2">触发异步按钮</button>
  </div>
</template>
<script>
export default {
  name: 'Content',
  methods: {
    // 触发mutations，可以通过mutations传递参数
    changeEvent1(){
      this.$store.commit('add',5);
    },
    // 调用dispatch触发actions时携带参数
    changeEvent2() {
      this.$store.dispatch('addAsync',5);
    },
    
  }
}
</script>

页面显示：

image.png