有关vuex的简单介绍

2021-09-18 19:04:11 阅读：229 来源： 互联网

标签：vuex 介绍 state mutation 简单 action Vuex store

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

标签：vuex,介绍,state,mutation,简单,action,Vuex,store
来源： https://www.cnblogs.com/little-baby/p/15309848.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

有关vuex的简单介绍