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