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: ''
})

Vuex的组成部分

vuex入门_第1张图片
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官方中文文档地址

你可能感兴趣的:(vuex入门)