vue-总结08-高级-全家桶-vuex

2# vuex
vuex是管理vue里集中式管理数据（一处修改，多处使用）的仓库，一般用于中大型项目的开发，
当你不确定是否使用vuex的时候就不要使用了。
学习阶段必须要用
公司用不用看是否有要求

1.什么是状态
	我们使用一条数据去管理一个视图，那么这个数据我们就称之为 ‘状态’
2.vuex是做什么的？
	管理数据的
	Vuex是一个集中式的存储管理中心，vuex中可以用来存储 数据（ 状态 ）
	vuex也是一个状态管理中心，它也可以进行状态的管理
3.什么是状态管理模式？
	我们使用一条数据去管理一个视图，那么这种管理模式就称之为 状态管理

vuex的核心组成部分

分别为： actions 、 state 、 mutations

1.actions表示动作的创建者，它的作用是创建动作，然后发送动作， 用于用户交互、后端数据交互
	举例：一个用户点击了登陆按钮
2.mutations 表示动作的出发者，它的作用是用来修改数据 -更新视图
3.state它是数据的存储者，它的作用是定义数据【 状态 】

vuex使用情况

1.分片指的是是否拆分数据

• 数据不分片
• 数据分片

2.分片是靠一个项目来实现的 modules

3.vuex的使用流程（数据不分片）
数据不分片就是将数据 放在一起 以下例子可以实现组件通信

1.安装  yarn add vuex  生产环境直接安装
2.在src里创建 store文件夹，里面新建index.js  引入插件 vue vuex 利用use中间件使用vuex   再创建store模块 导出store模块
3.在main里注入store模块

数据部分片

import Vue from 'vue'
import Vuex from 'vuex'
import state from '写着state模块的路径'
import actions from '写着actions模块的路径'
import mutations from '写着mutations模块的路径'
import modules from '写着modules模块的路径'

Vue.use(Vuex)

const store = new Vuex.Store({		//这边Store的S是大写   注意！！！！
	state,//存放数据   可以在组件中  this.$store.state.xx(具体的值)来访问state里的数据
	actions,//存放方法
	mutations,
	getters,
	modules
})

export default store

//一开始的数据
//在组件里 可以通过 this.$store.state.count  来访问数据
const state = {
	count:0,
}

export default state

然后再组件里使用数据 通过 this.$store.state.count

//这里存放的是方法
//作用是
//1.创建动作
//2.发送动作

const INCREMENT = 'INCREMENT'
const actions = {
	increment({commit},b){ //这个函数的第一个参数为store本身，下面有一些方法
						   //第二个参数为组件传递来的数据  这类数据叫payload也叫负载
	const action = {
		type:INCREMENT  //动作类型
		}
	commit(action)		//将actions和mutations连接
	}
}

export default actions

//mutations中存放的也是方法，作用是修改数据,mutations里的方法必须是actions里的动作类型
//
//
const mutations = {  
	[INCREMENT] (state,action){//第一个参数代表  state  第二个参数代表的是actions里的方法发来的action动作
	state.count++

	}
}

export default mutations

数据分片

import Vue from 'vue'

import Vuex from 'vuex'

import shopsModule from 'views/shops_list/store'


Vue.use(Vuex)

const store = new Vuex.Store({
    modules:{
        shopsModule
    }
})

export default store

import request from 'utils/request'

import API from 'api'

const GET_TABLE_DATA = 'GET_TABLE_DATA'

const shopsModule = {
    state: {                            //存放数据              数据储存者
        tableData: null
    },
    actions: {                          //数据交互   动作创建者  数据请求者
        async getTableData({ commit }) {
            const result = await request({
                url: API.shops_list,
                method: 'get'
            })

            const action = {            //创建动作
                type: GET_TABLE_DATA,    //动作类型
                payload: result          //负载
            }

            commit(action)            //将动作发送走
        }
    },
    mutations: {                        //修改数据  更新视图    数据修改者 连接者
        [GET_TABLE_DATA](state, action) {
            state.tableData = action.payload
        }
    }
}

vuex辅助工具

import {mapState,mapActions,mapMutations,mapGetters} from 'vuex'

export default {

computed:{
	...mapState({
		todos:state => state.todslist.todos //template中就能直接使用todos
	})
}

methods:{
	...mapAtions([actions中定义的事件])//相当于直接将actions中的事件放入了methods
	}

}