官网地址: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')
}