Vuex的基本使用

Vuex

1、定义

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

2、核心

Vuex的核心就是store仓库
store基本上就是一个容器，它包含着你的应用中大部分的状态

3、特点

①Vuex的状态存储是响应式的
②改变store中的状态的唯一途径是显式的提交mutation

4、属性

state

它是vuex的基本数据，用来存储变量

getter

从基本数据派生出来的数据，相当于state的计算属性，有缓存

mutation

它是唯一更改store中状态的方法，必须是同步函数

action

它不是直接变更状态，提交的是mutation，可以包含任意的异步操作

module

模块化Vuex，可以使结构非常清晰，方便管理

5、场景

多个组件共享数据或者是跨组件传递数据时适用Vuex

6、模块化Vuex

目录

下载：npm install vuex --save
引入：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

在index.js中，我们可以引入自定义模块并实例化一个仓库

import vue from "vue"
import vuex from "vuex"
import detail from "./module/detail"
import cart from "./module/cart"
vue.use(vuex);

export default new vuex.Store({
    modules: {
        detail,
        cart
    }
})

在module文件夹下的js中

export default{
    state:{},
    mutations:{},
    actions:{}
}