为什么存：存仓库的多组件可以数据共享
核心api
-
使用state中：this.$store.state.xxxx
-
辅助函数map中：this.$store.state.模块名.xxxx
-
每个组件都可以获取$store
-
-
计算属性：this.$store.getters.xxx
-
this.$store.commit("同步方法名", 参数)
-
调用同步方法，修改store中的数据
-
-
this.$store.dispatch("异步方法名", 参数)
-
调用异步方法，执行异步代码
-
1. 下载vuex，main.js中应用配置好的store
1.下载vuex
npm i vuex
2.实例化store
export default createStore({ })
3.应用store
import store from './store'
app.use(store)
2. 实例化仓库：store存储文件夹下 index.js中实例化仓库
共6个核心概念
3. 插件安装（因为刷新vuex会数据丢失）：可持久化存储插件解决
可持久化存储，插件：安装：（因为刷新vuex会数据丢失）
npm install vuex-persistedstate --save
日志打印：vuex自带createLogger
这个插件不用装，查看是否存储成功，会自动打印到 控制台import { createStore,createLogger } from 'vuex'
import createPersistedState from "vuex-persistedstate";
//实例化仓库
export default createStore({
state:{ //负责存储数据
userinfo:{}
},
getters:{ //定义计算方法( 类似组件中的计算属性, 每个计算方法必须有返回值 )
},
mutations:{ //定义同步方法( 可以直接修改state中的数据 )
save_userinfo( state, payload ){
state.userinfo = payload;
}
},
actions:{ //定义异步方法( 内部可以执行异步代码, 但是不能直接修改state中的数据 )
},
modules:{ //模块化管理state中的数据
},
plugins:[ //配合其他插件管理state中的数据
createLogger(),//日志打印
createPersistedState(),//持久化存储
]
})
4.使用
methods:{
onClickLeft(){
this.$router.go(-1);
},
async onSubmit(values){
//发起 登陆请求
var res = await service.user_login( values );
if( res.data.code == 200 ){
//存储用户的信息,token
this.$store.commit('save_userinfo',res.data.data)
//跳转到首页
this.$router.push('/index');
}
}
}5. methods：使用同步方法
6. actions：定义异步方法：（内部可以执行异步代码，但是不能直接修改state中的数据）
异步方法的背后都有一个同步方法
7. getters：定义计算方法，（类似数组中的计算属性，每个计算方法必须有返回值）
其实是当属性用，很像computed,当属性用
modules：模块化管理state中的数据：使用后的区别：
如果vuex被拆成了模块的话 那么我们要使用数据 必须使用
this.$store.state.模块名.xxxx
-
import导入数据模块（模块会独享方法），modules中注册模块
-
import Vue from 'vue' import Vuex from 'vuex' // 1.引用模块 import homem from "./modules/homem.js" import aboutm from "./modules/aboutm.js" Vue.use(Vuex) export default new Vuex.Store({ modules: {//2配置模块 homem, aboutm } })
-
-
正常使用：
-
import Vue from 'vue' import Vuex from 'vuex' // 1.引用模块 import homem from "./modules/homem.js" import aboutm from "./modules/aboutm.js" Vue.use(Vuex) export default new Vuex.Store({ modules: {//2配置模块 homem, aboutm } }) -
使用辅助函数map
-
<template> <div> fufuf <!-- 3.绑定自定义事件 --> <!-- <ZiCom @自定义事件=“函数”/> --> <ZiCom @xiaoming="demo"/> </div> </template> <script> import ZiCom from "./ZiCom.vue" export default { components:{ ZiCom }, methods:{ // 4定义函数 并且接收自定义事件上面的数据 demo(val){ console.log(val) } } } </script> <style> </style> -
同步异步使用
有map辅助函数可以实现简写
可以将vuex中的数据和方法直接映射
mapState 映射到computed中 mapGetters 映射到computed中
mapMutations 映射到methods中 mapActions 映射到methods中
vuex的辅助函数（简化了我们操纵vuex数据的复杂度）mapState--->数组用法：
vuex的辅助函数（简化了我们操纵vuex数据的复杂度）mapState--->数组用法
<template>
<div class="sunClass">
组件
<h1>aa{
{texta}}</h1>
<h1>aa{
{obj.name}}</h1>
</div>
</template>
<script>
import {mapState} from "vuex"
export default {
// 使用mapState
computed:{
// 名字需要和vuex的state数据名相同
...mapState(["texta","obj"])
}
};
</script>vuex的辅助函数mapState--->对象用法 ：
数组方式：如果使用了模块 在mapState中写的就是模块名
<template>
<div class="sunClass">
组件
<!-- 使用数据的时候 就是下面找到的模块名.数据名 -->
<h1>{
{ com.texta}}</h1>
<h1>{
{ com.obj.name}}</h1>
</div>
</template>
<script>
import {mapState} from "vuex"
export default {
// 如果使用了模块 在mapState中写的就是模块名
computed:{
...mapState(["com"])
}
};
</script>
对象方式：
<template>
<div class="sunClass">
组件
<h1>aa{
{xiaoming}}</h1>
<h1>aa{
{xiaohong.name}}</h1>
</div>
</template>
<script>
import {mapState,mapActions} from "vuex"
export default {
// 使用mapState
computed:{
...mapState({
// state.模块名.数据名
xiaoming:(state)=>state.com.texta,
xiaohong:(state)=>state.com.obj,
})
},
methods:{
...mapActions(["axioslink"])
}
};
</script>