vue状态管理模式vuex

Posted 2020-12-05 soul-wonder

一、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文档