状态管理(vuex) store(集中式的存储管理)
什么时候用: 打算开发中大型应用
集中式数据管理, 一处修改,多处使用
思维流程:
store.js
this.$store.commit('increment') -> mutations
this.$store.dispatch('jia') -> actions
mapActions() ->actions mapGetters()->getters
学生 代课老师 校长 财务 班主任 学生
(view)component - dispatch > action -> mutation -> state <- getter <- component
发送请求 处理 修改状态
业务逻辑 修改state 读取state
异步
1. 什么是状态
我们使用一条数据去管理一个视图,那么这个数据我们就称之为 ‘状态’
2. vuex是做什么的?
Vuex是一个集中式的存储管理中心,vuex中可以用来存储 数据( 状态 )
vuex也是一个状态管理中心,它也可以进行状态的管理
3. 什么是状态管理模式?
我们使用一条数据去管理一个视图,那么这种管理模式就称之为 状态管理
4. 什么时候使用vuex
中大型应用使用 (使用的时间)
5. vuex的开发流程
四个方案:
1. 前: 标准 后: 标准 √
2. 前: 标准 后: 非标准 √
3. 前: 非标准 后: 非标准 √
4. 前: 非标准 后: 标准 √
component ---dispatch---> actions ---commit--->mutations---state <----getters----component
6. 解决了三个工具 mapActions mapMutations mapGetters
export default 默认导出一个
export 叫批量导出,可以导出多个
引入store并要在main.js注册store
import Vue from 'vue'
import Vuex from 'vuex'
import movieStore from './movie'
Vue.use ( Vuex )
const store = new Vuex.Store({
modules: {
movieStore
}
})
export default store
state.js文件
定义初始数据
const state = {
n_hot_movies: null,
}
export default state
actions.js文件
获取数据的方法
import axios from 'axios'
import * as type from './type'
// import { GET_NOW_HOT_MOVIES } from './type'
const actions = {
getNowHotMovies ( { commit }) {
axios({
url: '/ajax/movieOnInfoList',
method: 'GET',
params: {
token: ''
}
})
.then ( res => {
const action = {
type: type.GET_NOW_HOT_MOVIES,
payload: res.data
}
commit( action )
})
.catch( error => {
if ( error ) throw error
})
},
}
export default actions
mutations.js文件
修改数据
import * as type from './type'
const mutations = {
[ type.GET_NOW_HOT_MOVIES ] ( state,action ) {
state.n_hot_movies = action.payload
},
[ type.GET_MORE_COMING_MOVIES ] ( state,action ){
state.more_movies = action.payload
}
}
export default mutations
type.js文件
定义常量
export const GET_NOW_HOT_MOVIES = 'GET_NOW_HOT_MOVIES'
getters.js文件
获取新数据
const getters = {
new_n_hot_movies ( state ) {
return state.n_hot_movies
},
new_more_coming_movies ( state ) {
return state.more_movies
}
}
export default getters