Vuex状态管理

状态管理(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