Vuex

目录

一、概念和作用解析

二、基本使用

三、vuex-devtools和mutation

四、getters的使用

五、mutation的携带参数

六、Mutation的响应式规则

七、Mutation的类型常量

八、Action的使用

定义action

调用action

简单的回调

更加优雅的回调

九、modules

十、store文件夹的目录组织

---

一、概念和作用解析

官方文档：https://vuex.vuejs.org/zh/

Vuex：

• Vuex是一个专门为vue.js开发的状态管理模式
• 采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生改变；

状态管理：

• 把需要多个组件共享的变量全部存储在一个对象里；
• 这个对象放在顶层的Vue实例中，让其他组件可以使用；

 

一般需要管的状态：

• 用户的登录状态、头像、地理位置等等
• 商品的收藏、购物车的物品等等

二、基本使用

npm install --save vuex

在src/store下配置文件

index.js

在main.js中使用

我们可以在store/index.js中注册全局状态：

在任意一个组件中使用状态：

 

 

三、vuex-devtools和mutation

相当于一个日志记录

安装：

我的Chrome安装了也用不了，不知道为嘛子

修改全局状态，在mutations中定义方法：

调用方法使用this.$store.commit（‘方法名’）

 

 

四、getters的使用

类似computed计算属性

使用：

getters作为参数和传递参数：

作为参数：

getteers默认是不能传递参数的，如果希望传递参数，那么只能让getters本身返回另一个函数

 

五、mutation的携带参数

Vuex的store状态更新的唯一方式：提交Mutation

mutation主要包括两部分：

• 字符串的事件类型（type）
• 一个回调函数（handler），该回调函数的第一个参数就是state

带参数传递的Mutation：

调用：

 

参数被称为mutation的载荷（Payload），多个参数时，我们可以以对象的形式传递

还可以用一种包含type属性的对象的方式提交

六、Mutation的响应式规则

• 必须提前在store中初始化好所需的属性，这些属性都会被入到响应式系统中（deps），响应式系统会监听属性的变化，当属性发生变化时，会通知所有界面中用到该属性的地方（watcher），让界面发生更新。
• 如果要给state中的对象添加新的属性时，用这两种方式：

1、通过Vue.set（）方法

2、用新对象给旧对象重新赋值

七、Mutation的类型常量

定义常量映射

定义时使用常量

import {INCREMENT} from './mutation-types'

调用时使用常量

import {INCREMENT} from './store/mutation-types'

八、Action的使用

定义action

//异步操作
    actions: {
        //context:上下文，这里等同于store
        updateCounter(context) {
            new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve();
                }, 1000)
            }).then(() => {
                //错误代码 不要直接修改state的属性
                //context.state.counter += 1
                context.commit({
                    type:INCREMENT,
                    num:1
                })
            })
        }
    },

调用action

	methods:{
		add(num){
			this.$store.dispatch('updateCounter')
		},

简单的回调

更加优雅的回调

在调用时调用then

九、modules

解决state过于臃肿，可以在modules中定于store模块，每个模块中拥有自己的state、muattaion等等

定义模块：

const mudoleA = {
    state:{
        name:'马飞飞'
    }
}

    modules: {
        mudoleA,
    }

使用模块：

 

十、store文件夹的目录组织

将属性抽离出去。