vuex的知识点

构成：

　　1.state：

　　　　自定义的变量，用来保存数据。

 

　　2.mutaions：

　　　　用来触发事件，相当于方法。通过触发这个方法，借此来保存数据。第二个参数为传入的值。

import Vue from "vue"
import Vuex from "vuex"
 
Vue.use(Vuex);
 
export default new Vuex.Store({
    state:{
        pathName: "",
        currDbSource: {},
        currJobData: {},
        DbSource: []
    },
    mutations:{
        // 保存当前菜单栏的路径
        savePath(state,pathName){
            state.pathName = pathName;
        },
        // 保存当前点击的数据源
        saveCurrDbSource(state,currDbSource){
            state.currDbSource = currDbSource;
        },
        // 保存当前点击的元数据
        saveCurrJobData(state,currJobData){
            state.currJobData = currJobData;
        },
        // 保存所有数据源
        saveDbSource(state,DbSource){
            state.DbSource = DbSource;
        }
    }
})

　　3.actions：

　　　　间接触发mutations方法的一种中间商，可以执行异步操作。暴露给用户使用。

　　　　当进行异步操作时，mutations无法进行响应监听。虽然页面上的内容改变了，但实际上Vuex.Store没有监听到数据的更新。

　　　　

　　4.getters：

　　　　过滤，跟state同样能获取数据，区别是state只能拿数据，getters可以对数据进行加工，和计算属性一样依赖缓存。

　　

　　5.module：

　　　　拆分。每个模块都拥有自己的state、mutation、action、getter、甚至是嵌套子模块。

 

 

 

ps：vue2与3使用vuex的区别：

两者核心区别就是类型提示，像定义组件需要 defineComponent 同出一辙：

Vue3

import { createStore } from "vuex";

import example from './modules/example'

export default createStore({
state: {},
mutations: {},
actions: {},
modules: { example }
})


Vue2

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
state: {},
mutations: {},
actions: {},
modules: {}
});

 

通过如上对比我们发现为了获取类型提示 Vuex 提供了 createStore() 函数，相当于原来的 Vuex 实例化过程，与 Vue 3 的函数 application 思想一致。

 

搜索

复制