vuex官方文档细说

官网地址:https://vuex.vuejs.org/zh-cn/

vuex是什么

首先,vuex是一种设计思想
所有组件的所有状态和数据放在一个内存空间来管理,我们称为state,state可以方便的映射到组件,渲染组件,当组件数据发生变化 ,可以dispatch一个action ,commit一个mutation,而mutation是 唯一可以修改state

vuex的使用场景

大型项目中,兄弟组件之间或者非兄弟组件之间进行数据传递或者来解决路由间的数据传递

如何使用

store目录下一般有以下几个文件:
index.js 入口文件

state.js状态

state只保留基础数据  
const state = {
  msg: []
}
export default state

getters.js包装映射

在基础数据可以计算的数据  我们放在getters里面
我们一般从getters里面去state,所以也会做一层映射
export getters = {
  msg = state => state.msg
  len = state => state.msg.length
}
export default getters 

mutation-type.js与mutation相关的字符常量

export const SET_MSG = 'SET_MSG'

mutation.js更改state

更改state
import * as types from '../mutation-types'
const mutations = {
  [types.SET_MSG] (state, arr) {
    state.msg = arr
},

actions.js异步

异步操作
或者封装多个mutation
export const api = ({commit}) => {
    commit('SET_MSG')
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 3,179评论 0 6
  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应...
    白水螺丝阅读 4,704评论 7 61
  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 2,979评论 0 7
  • vuex 场景重现:一个用户在注册页面注册了手机号码,跳转到登录页面也想拿到这个手机号码,你可以通过vue的组件化...
    sunny519111阅读 8,082评论 4 111
  • 那天,我跟你说,“我喜欢你”。 “别套路我”。 “我真的喜欢你”。 “什么时候的事”...
    小小小义呀阅读 503评论 0 0