vue状态管理模式vuex

Posted soul-wonder

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue状态管理模式vuex相关的知识,希望对你有一定的参考价值。

一、vuex介绍

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

  即data中属性同时有一个或几个组件同时使用,就是data中共用的属性。相当于全局变量

 

  适合开发大型单页应用

二、安装

npm install --save vuex

三、使用入门

前提:使用vue-cli构建的项目

1、引入vuex

  1.新建一个store文件夹(这个不是必须的),并在文件夹下新建index.js文件,文件中引入我们的vue和vuex。记得要用Vue.use进行引用

import Vue from ‘vue‘
import Vuex from ‘vuex‘

Vue.use(Vuex);

  2.在main.js引入store目录下的index模块(默认index.js,可以省略),并且在实例化 Vue对象时加入 store 对象 

import store from ‘./store/‘

new Vue({
    el: ‘#app‘,
    router,
    store,//使用store,子组件通过 `this.$store` 调用
    template: ‘<App/>‘,
    components: { App }
})

2、使用store

  1.store完整配置

const store = new Vuex.Store({
        state: {},
        getters: {}, 
        mutations: {}, 
        actions: {},
        modules: {
        home: {
            state: {},
            getters: {}, 
            mutations: {}, 
            actions: {},
        }
        },
        strict: process.env.NODE_ENV !== ‘production‘
    });

  2.用export default 封装代码,让外部可以引用

export default store;

3、说明

 vuex 核心仓库是store(state,mutations,actions,getter,modules)。

  1.  action 提交mutation,而不是直接更改状态
  2. action 可以包括异步操作,mutation只能同步
  3. modules  将store分割成模块(modules),每个模块拥有自己的(state,mutations,actions,getter);方便维护
  4. store 改变状态时通过 (commit) mutations

例子分析:模块a / 模块b   模块b获取模块a的数据

方法1: 用组件之间通讯。这样写很麻烦,并且写着写着,估计自己都不知道这是啥了,很容易写晕。

方法2: 我们定义 全局变量。模块a的数据 赋值给全局变量 x。然后 模块b 获取x。这样我们就很容易获取到数据

我们把模块a 的数据叫 state全局变量叫store。模块b 叫data

Getter 是一个纯函数,用于接收state 参数。返回你需要取的值

mutation  是对  state 进行修改

action  处理数据,对处理的数据 返回给 mutation 从而对 state 进行修改。

vuex最简单、最详细的入门文档

Vuex 使用详解

最详细的Vuex教程

vue--vuex详解

vuex文档

 

 

以上是关于vue状态管理模式vuex的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段13——Vue的状态大管家

手把手教你学vue-4(vuex)

vue状态管理(vuex)

Vuex笔记

Vue 教程(四十九)Vuex 核心概念和项目结构

Vue 教程(四十九)Vuex 核心概念和项目结构