【Vue.JS】Vuex 的使用

VueX

Vuex 是 Vue 状态管理模式的框架。其最大的特点就是响应式数据数据存储。

简单来说，就是 vuex 在自己的核心 store 中存储数据，这些数据一旦发生变化，相应的所有使用到该数据的组件都会高效的更新。
并且 Vuex 的 store 中的数据，是全局对象，在所有的组件中都可以直接调用，而不需要普通组件的 props 和 emit 等操作。

VueX 安装

npm i -D vuex

VueX 使用

main.js 中导入 vuex 并配置

// 导入 Vue 框架
import Vue from "vue";
// 导入 Vuex 组件
import Vuex from 'vuex';
//使用 vuex 组件
Vue.use(Vuex);

/**
 * vuex 的配置
 * store 包含了应用的数据状态和操作过程。
 * Vuex 里的数据都是响应式的，任何组件使用同一 store 的数据时，只要 store 变化，对应的组件也会立即更新
 */
const store = new Vuex.Store({
    /**
     * 数据保存在 Vuex 的 state 字段中。
     * state 中的数据只能读取，不能手动改变。改变 state 中的数据唯一的途径就是显示的提交 mutations
     * 比如实现一个计数器
     * 在任何组件中，都可以通过 $store.state.count 读取
     */
    state: {
        count: 0,
        list: [1, 12, 23, 34, 45, 56, 67, 78, 89, 90]
    },
    /**
     * mutations 用来直接修改 state 中的数据
     * 在组件中，通过 this.$store.commit 方法来执行 mutations
     * 比如：this.$store.commit('increment')
     * mutations 的第二个参数，可以是数字、字符或对象。
     * 比如：decrease(state, n = 3) //这种设置默认值的语法时 ES6 的
     * 
     * mutation 中尽量避免异步操作
     * 因为异步操作，组件在 commit 之后无法做到立即更新
     */
    mutations: {
        increment(state) {
            state.count++;
        },
        decrease(state, n = 3) {
            state.count -= 3;
        },
        pushRandom(state) {
            state.list.push(Math.random().toFixed(2) * 100);
        }
    },
    /**
     * getters 方法
     * getters 方法在这里的作用类似于计算属性
     * getters 方法也可以依赖其他的 getter 方法，把 getter 作为第二个参数
     */
    getters: {
        filteredList: state => {
            return state.list.filter(item => item % 2 == 0);
        },
        listCount: (state, getters) => {
            return getters.filteredList.length;
        }
    },
    /**
     * actions 和 mutations 类似。不同的是 action 里面提交可以进行异步操作业务逻辑
     * actions 通过 commit 方法提交方法，然后组件通过 $store.dispatch 触发（使用方法类似于子组件 $emit 传值 父组件on 监听）
     */
    actions: {
        pushRandom(context) {
            context.commit('pushRandom');
        }
    }
})

// 创建 vue 实例
new Vue({
    el: "#app",
    
    //使用vuex
    store: store,
});

任意组件中都可以使用 vuex 的数据

<template>
  <div>
    <h1>VueX调用实例</h1>
    <p>{{$store.state.count}}</p>
    <p>{{count}}</p>
    <button @click="handleIncrement">+1</button>
    <button @click="handleDecrease">-3</button>
    <hr>
    <div>原数组：{{list}}</div>
    <div>数组：{{filteredList}}</div>
    <div>长度：{{listCount}}</div>
    <button @click="handlePushRandom">push random</button>
  </div>
</template>

<script>
export default {
  computed: {
    //访问 Vuex 中的属性，可以直接写在 template 中，也可以通过计算属性来显示
    count() {
      return this.$store.state.count;
    },
    list() {
      return this.$store.state.list;
    },
    filteredList() {
      return this.$store.getters.filteredList;
    },
    listCount() {
      return this.$store.getters.listCount;
    }
  },
  methods: {
    handleIncrement() {
      this.$store.commit("increment");
    },
    handleDecrease() {
      this.$store.commit("decrease");
    },
    handlePushRandom() {
      this.$store.dispatch("pushRandom");
    }
  }
};
</script>