首先在html页面中使用
第一步声明状态机的配置项
let storeConfig = {
//类似于data 存储公共状态 存储数据
state:{
public:'hello vuex',
token:""
},
// 类似于计算属性 对state中数据进行处理然后再返回
getters:{
Upper(state){
return state.public.toUpperCase();
}
},
// 突变 同步操作 修改state中的数据的唯一一种方式
mutations:{
SET_TOKEN(state,payload){
// state是vuex默认提供的 payload载荷 提交突变传参 payload接收突变传递参数
state.token = payload
},
// SET_PUBLIC(state,payload){
// state.public = payload
// }
},
// 动作 异步操作
actions:{
// 登录获取token 提交突变 把token传给突变 突变-->设置给state中token
login(sto,payload){
// sto类仓库对象 默认提供 commit提交突变 dispacth
// 假设发送完成异步请求
let token = 'esfkhsdakfjlskjfdlsjglkasdkfskfdasdasfksadf';//token就是后端获取数据token
// 将token提交给突变
sto.commit('SET_TOKEN',token);
console.log(sto,payload,'22222');
}
}
};第二步创建状态机实例
let store = new Vuex.Store(storeConfig);第三步注册状态机实例
new Vue({
el:"#app",
//3.注册状态机实例
store,
data:{
},
methods:{
}
})应用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.6.2/vuex.js"></script>
</head>
<body>
<div id="app">
<!-- 获取状态 $store.state/getters -->
{{$store.state.public}}
{{$store.getters.Upper}}
{{$store.state.token}}
<button @click="$store.commit('SET_TOKEN','ejhwksdfdskjfhsdkhgkasdjflas')">提交突变</button>
<button @click="$store.dispatch('login',{username:'admin1',password:123321})">分发动作</button>
</div>
<script>
// 1.声明状态机配置项
let storeConfig = {
//类似于data 存储公共状态 存储数据
state:{
public:'hello vuex',
token:""
},
// 类似于计算属性 对state中数据进行处理然后再返回
getters:{
Upper(state){
return state.public.toUpperCase();
}
},
// 突变 同步操作 修改state中的数据的唯一一种方式
mutations:{
SET_TOKEN(state,payload){
// state是vuex默认提供的 payload载荷 提交突变传参 payload接收突变传递参数
state.token = payload
},
// SET_PUBLIC(state,payload){
// state.public = payload
// }
},
// 动作 异步操作
actions:{
// 登录获取token 提交突变 把token传给突变 突变-->设置给state中token
login(sto,payload){
// sto类仓库对象 默认提供 commit提交突变 dispacth
// 假设发送完成异步请求
let token = 'esfkhsdakfjlskjfdlsjglkasdkfskfdasdasfksadf';//token就是后端获取数据token
// 将token提交给突变
sto.commit('SET_TOKEN',token);
console.log(sto,payload,'22222');
}
}
};
// 2.创建状态机实例
let store = new Vuex.Store(storeConfig);
new Vue({
el:"#app",
//3.注册状态机实例
store,
data:{
},
methods:{
}
})
</script>
</body>
</html>辅助函数
第一步：引入辅助函数从Vuex中
let {mapState,mapGetters,mapActions,mapMutations} = Vuex;在vue实例中引入：
methods:{
...mapActions(['login']),
...mapMutations(['SET_TOKEN']),
// 相当于 login(){}
},
computed:{
// 引入辅助函数所对应的状态/数据 mapState('命名空间',['','',''])
...mapState(['public','token']),
...mapGetters(['Upper'])
},应用：
{{public}}
{{token}}
<button @click="SET_TOKEN('假的token')">提交突变</button>
<button @click="login({username:'admin1',password:123321})">分发动作</button>二次封装axios
/*
* @Author: 湛国辉 12289362+zhan-guohui@user.noreply.gitee.com
* @Date: 2023-12-18 16:59:56
* @LastEditors: 湛国辉 12289362+zhan-guohui@user.noreply.gitee.com
* @LastEditTime: 2023-12-18 17:20:01
* @FilePath: \personal-warehouse\Vue\Day10\app01\src\utils\1.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import axios from 'axios'
import qs from 'qs'
import store from '@/store'
// 创建axios请求实例
const service = axios.create({
baseURL:'',
timeout:5000
})
// 请求拦截器
service.interceptors.request.use(config=>{
if(store.state.login.token){
// 设置请求头
config.headers['Authorization'] = localStorage.getItem('token')
}
return config
},error=>{
return Promise.reject(error)
})
// 响应拦截器
service.interceptors.response.use(response=>{
return response.data
},error=>{
return Promise.reject(error)
})
// 封装get post postJSON放法
export function get(url,params){
return service.get(url,{
params
})
}
export function postJSON(url,data){
return service.post(url,data)
}
// 表单格式post请求 将data数据转为表单格式
export function post(url,data){
return service.post(url,qs.stringify(data))
}
export function del(url,params){
return service.delete(url,{
params
})
}
export default service在Vue脚手架运用
首先在main.js中引入store状态机
import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false
new Vue({
store,
render: h => h(App)
}).$mount('#app')在src文件中创建store文件夹创建两个状态机模块
在index.js中引入不同的状态机模块
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 引入登录状态机模块
import login from './login/login'
// 引入用户状态机模块
import user from './custom/custom'
export default new Vuex.Store({
state: {
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
login,
user
}
})login.js
import { postJSON } from "@/utils/request"
// 登录状态机
export default {
// 开启命名空间
namespaced:true,
state:{
msg:'hello vuex',
token:"" || localStorage.getItem('token')
},
getters:{
Upper(state){
return state.msg.toUpperCase()
}
},
// 突变 修改state唯一方式
mutations:{
SET_TOKEN(state,payload){
state.token = payload;
// 持久化存储 永久性存储 本地存储
localStorage.setItem('token',payload);
}
},
// 异步操作 动作
actions:{
async login({commit},payload){
let res = await postJSON('/user/login',payload);
console.log(res,'获取响应');
// 提交给SET_TOKEN突变
commit('SET_TOKEN',res.data.token)
}
}
}login.vue
<template>
<div>
<!-- 登录页面--{{msg}}--{{Upper}} -->
{{$store.state.login.msg}}
<button @click='login({username:"admin1",password:123321})'>登录</button>
</div>
</template>
<script>
// 引入辅助函数
import {mapState,mapGetters,mapMutations, mapActions, Store} from 'vuex';
export default {
data(){
return {
}
},
created(){
},
computed:{
// 辅助函数参数(命名空间,[''])
// ...mapState('login',['msg']),
...mapGetters('login',['Upper'])
},
methods:{
...mapActions('login',['login']),//相当于声明在login(){}
// login(obj){
// // 触发异步登录动作
// this.$store.dispatch('login/login',obj)
// }
}
}
</script>user.vue
<template>
<div>
用户组件---{{token}}
</div>
</template>
<script>
import {mapState} from 'vuex';
import {get} from '@/utils/request'
export default {
computed:{
...mapState('login',['token'])
},
methods:{
async findAll(){
let res = await get("/carousel/findAll");
console.log(res,'获取响应');
}
},
created(){
this.findAll()
}
}
</script>