vuex入门

Vuex是什么

Vuex是一个专为Vue.js应用程序开发的 状态管理模式 。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方法发生变化，Vuex 也继承到 Vue 的官方调试工具 devtools extension ,提供了诸如零配置的 time-travel 调试，状态快照导入导出等高级调试功能

使用Vuex

安装：

npm install --save vuex

引入:

在scr目录下，新建一个store文件夹，然后在store目录下新建一个index.js

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

然后在main.js中引入store下的index.js

import store from './store/index'

new Vue({
    el: '#app',
    store,
    components: {APP},
    template: '<APP/>'
})

Vuex的组成部分

image

state

State 负责存储整个应用的状态数据，一般需要在使用的时候跟节点注入store对象，后期可以使用this.$store.state 直接获取状态

Mutations

Mutations 利用它可以更改状态，本质就是用来处理数据的函数，其接受唯一的参数值state。store.commit(mutationName)是用来触发一个mutation的方法

ps：定义mutation必须是同步函数，否则devtool中的数据将出现问题

Actions

Actions 也可以用于改变状态，不过是用过触发mutation实现的，重要的是可以包含异步操作

getters

有些状态需要做二次处理，就可以使用 getters 。通过this.$store.getters.valueName 对派生出来的状态进行访问。

Plugins

插件就是一个钩子函数，在初始化 store 的时候引入即可，比较常用的是内置的logger插件

Vue官方中文文档地址