导航

有关vuex的简单介绍

Posted on 2021-09-18 18:41  小白撸代码  阅读(38)  评论(0编辑  收藏  举报

首先vuex是一个专门为vue.js应用开发的状态管理模式工具,其中它的状态(state)都是响应式的

其次vuex的安装,通过npm install vuex --save安装到开发环境下。

注:如果是vuex4+版本--配合vue3.0安装版本,通过npm install vuex@next --save(后续介绍vuex4.+)

关于store,直接上代码(基本方式)

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

Vue.use(Vuex)

const store = new Vuex.Store({
   state: {},
   getters: {},
   mutations: {},
   actions: {} 
})

还有一种带模块的(module),这种相对于前一种比较复杂,详细可以参考文档:https://vuex.vuejs.org/zh/

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

Vue.use(Vuex)

const store = new Vuex.store({
    // 全局 state,模块内部也可以写自己的状态
    state,
    modules: {
        // 里面分别写不同的模块
    }
})

export store

需要注意三点:

1、vuex官方文档中说mutation是唯一改变state状态的途径。经过查资料和验证发现非严格模式下action也可以改变state的状态。

2、action存放异步操作,mutation 都是同步事务。其实不然,mutation也可以放异步任务,尤大大也说了文档不是他翻译,之所说mutation放同步任务是为了更好的追踪状态

3、如何直接获取mutation和action返回的参数,1)可以通过回调函数。2)通过return返回(注:通过return返回时action返回promise,mutation返回时undefined-只能通过回调函数)