Vuex 基本使用

概念

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。特点:

全局
统一
单一

解决问题:

数据跨组件共享
防止数据意外修改
调试,测试

安装引用

安装:npm i vuex -S
引用:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

使用

store.js:

import Vue from 'vue'
import Vuex from 'vuex'
import User from './modules/user'
import Problems from './modules/Problems'
Vue.use(Vuex)

export default new Vuex.Store({
    strict: process.env.NODE != 'production',

    // 此处为全局对象,在其他组件中能使用 {{$store.state.a}} 访问
    state: {
        a: "2",
        b: "3",
    },

    // 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation, 在其他组件中可以使用 store.commit('increment') 来调用

    mutations: {
        getA(state, a) {
            state.a = a
        },
    },

    // Action 类似于 mutation，不同在于：
    // Action 提交的是 mutation，而不是直接变更状态。
    // Action 可以包含任意异步操作。
    actions: {
        getA({ commit }, a) {
            commit('getProblems', a)
        },
    },

    // Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
    getters: {
        count(state) {
            return state.a + state.b
        }
    },
    // Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：
    modules: {
        problems: Problem,
        user: User,
    }
})

调用

在其他组件中,我们可以用下面方法调用 vuex

import { mapActions, mapState } from "vuex";

export default {
  data() {
  },
  methods: {
    // 调用vuex 中的 getA actions
    ...mapActions([
      "getA"
    ])
  },
  // 调用 vuex 中的值和计算属性
  computed: {
    ...mapState([
      "a",
      "count"
    ]),
  },
};

语言

Vuex 基本使用

概念

安装引用

使用

调用