首先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-只能通过回调函数)