Vuex是什么

Vuex称为Vue的状态管理工具，也是多组件状态共享的工具状态： 状态就是数据

Vuex的作用

它是一个存储状态的仓库，类似：本地存储、cookie、database多个组件共享一个状态，我们称之为： ‘多组件状态共享’它还可以管理状态，这种形式我们称之为‘ 状态管理’

Vuex组成部分

Vuex的核心组成部分 state 数据的存储者，它的作用是定义数据【 状态 】actions 动作的创建者，它的作用是创建动作，然后发送动作mutations 动作的出发者，它的作用是用来修改数据 -更新视图 后端数据交互写在actions中vuex调试工具主要调试的mutationsvuex是流程化执行的，符合单向数据流思维

Vuex流程

流程1 component – dispatch --> actions – commit --> mutations – mutate --> state --> component

流程2 component – commit --> mutations – mutate --> state --> component

流程3 component – commit --> mutations – mutate --> state --> getter --> component

流程4 component --dispatch --> actions – commit --> mutations – mutate --> state --> getter --> component

Vuex基础操作流程【数据不分块】

安装vuex $ yarn add vuex在src/store/index.jsimport Vuex from 'vuex' import Vue from 'vue' Vue.use( Vuex ) // 1. 定义store 模块 const store = new Vuex.Store({ state：{ count: 0 }, actions： /* 1. actions是一个对象 2. acitons里面放的都是方法 3. 方法的作用是创建动作，发送动作 */ increment ( { commit }, val ) { // 动作创建 const action = { type: INCREMENT, val } // 发送动作 commit( action ) } }, mutations：{ /* * 也是一个对象 * 里面存放的也是方法 * 方法名称是actions发送来的动作的类型 * 接收两个参数 * state就是数据 ， action就是actions发来的动作 * mutations作用是用来修改数据的 * payload表示从组件传递过来的参数 负载 */ INCREMENT ( state,action ) { //修改数据 state.count ++ } }, getters: {}, //getters表示帮助 视图【 组件 】 获得store中的 state modules // 用来实现数据分块的 }) // 2. 导出store模块 export default store 在main.js中注入import store from './store' new Vue({ router, // 在项目中注入路由，让所有的子组件都用于路由属性 $route $router store, // 在项目中注入store,让所有的子组件拥有一个属性 $store ， 用于和vuex进行通信 render: h => h(App), }).$mount('#app') 在组件中使用<template> <div> <button @click = "add"> + </button> <p> </p> </div> </template> <script> export default { methods: { add () { // this.$store.dispatch( actions中方法的名称 ) this.$store.dispatch('increment',100) } } } </script>

Vuex基础操作流程【数据分块】

安装vuex $ yarn add vuex在src/store/index.jsimport Vue from 'vue' import Vuex from 'vuex' import home from '../views/home/store' Vue.use(Vuex) const store = new Vuex.Store({ modules:{ home //导入模块 } }) export default store 在main.js注入import store from './store' new Vue({ router, // 在项目中注入路由，让所有的子组件都用于路由属性 $route $router store, // 在项目中注入store,让所有的子组件拥有一个属性 $store ， 用于和vuex进行通信 render: h => h(App), }).$mount('#app') 在src/views/home/store.js中打造vueximport axios from 'axios' const GETMOVIES = 'GETMOVIES' export default{ state:{ movies:null, }, actions:{ getMovies({commit}){ axios({ url:'/ajax/movieOnInfoList', params:{ token: '' } }).then(res=>{ commit({ type:GETMOVIES, payload:res.data }) }) }, }, mutations:{ GETMOVIES(state,action){ state.movies = action.payload } } } 在src/views/homeindex.vue中调用

辅助工具

mapActionsmapMutationsmapGettersmapStateexport default 默认导出一个export 叫批量导出，可以导出多个