1、store配置

	import {createStore} from 'vuex'const storeData={state:() => ({}),getters:{},mutations:{},actions:{},modules:{}}const store=createStore(storeData)export default storeimport App from './App.vue'import store from "./store/index";const app=createApp(App)app.use(store)app.mount('#app')

2、State

（1）State定义：state保存数据

	state: () => ({counter: 100,name: "coderwhy",level: 100,avatarURL: "http://xxxxxx",friends: [{ id: 111, name: "why", age: 20 },{ id: 112, name: "kobe", age: 30 },{ id: 113, name: "james", age: 25 }]}),

（2）State使用：

3、Getter

（1）Getter定义：getter，转化和返回state中的数据

参数为state、getters，如需传入参数，则返回一个函数，参数的参数为getters的传入参数。

	 getters: {// 1.基本使用doubleCounter(state) {return state.counter * 2},totalAge(state) {return state.friends.reduce((preValue, item) => {return preValue + item.age}, 0)},// 2.在该getters属性中, 获取其他的gettersmessage(state, getters) {return `name:${state.name}level:${state.level} friendTotalAge:${getters.totalAge}`},// 3.getters是可以返回一个函数的, 调用这个函数可以传入参数(了解)getFriendById(state) {return function(id) {const friend = state.friends.find(item => item.id === id)return friend}}},

（2）getter使用

4、Mutations

（1）Mutations定义：mutations修改state中的数据，

注意点：mutations执行同步代码，不要在mutations中执行异步操作，异步请求在actions中执行。
只能在mutations中修改state，在actions中不能直接修改state，必须触发mutations才能修改state。
Mutations参数是state和传入参数。

	import { CHANGE_INFO } from './mutation_types'mutations: {increment(state) {state.counter++},changeName(state, payload) {state.name = payload},incrementLevel(state) {state.level++},[CHANGE_INFO](state, newInfo) {state.level = newInfo.levelstate.name = newInfo.name}}

（2）Mutations使用：mutations使用commit()提交

5、Actions

(1)Actions定义：

如果网络请求的数据要保存在state中，网络请求可以在actions中操作。
Actions中不能直接修改state，要修改state只能通过调用mutations。
Actions的参数是context和传入参数，可以从context.commit()、context.state、context.getters。

 actions: {incrementAction(context) {context.commit("increment")},changeNameAction(context, payload) {context.commit("changeName", payload)},fetchHomeMultidataAction(context) {//返回一个promise，利用 resolve()返回参数，表示actions已经执行完毕return new Promise(async (resolve, reject) => {const res = await fetch("http://123.207.32.32:8000/home/multidata")const data = await res.json()// 修改state数据context.commit("changeBanners", data.data.banner.list)context.commit("changeRecommends", data.data.recommend.list)resolve("aaaaa")})}},

(2)Actions使用dispatch()派发：