基础
1:下载 npm i vuex
2: 导入
//在对应创建的指定js中导入
src/store/index.js
import Vuex from 'vuex'
3:注册
import Vue from 'vue'
Vue.use(Vuex)
4:实例化
const store =new Vuex.Store({
state:{
// 共享的数据仓库
},
mutations:{
// 唯一修改state
},
actions:{
},
getters:{
}
})
5:暴露出去 export default store
6:挂载
main.js
import store from '@/store'
new Vue({
store
})
使用
定义:state:{
xxx:'张三'
}
使用:this.$store.state.xxx
mapState使用 映射方法
1:导入 import {mapState} from 'vuex'
2: 定义:
computed:{
...mapState(['state的属性(xxx)'],{新的名字:'state的属性名'})
}
3:使用:
{
{xxx,新的名字}}
定义
mutations:{
方法名(state,value){
state.属性名=value
}
}
普通方法使用:this.$store.commit('方法名',实参值)
mapMutations
1:导入 import {mapMutations} from 'vuex'
2:定义
methods:{
...mapMutations(['方法名'])
}
3:使用 this.方法名(实参值)
getters:{
方法名(state,getters,rootState,rootGetters){
return 新的值
}
}
使用:this.$store.getters.方法名
mapGetters
1:导入 mport {mapGetters} from 'vuex'
2:定义
computed:{
...mapGetters(['方法名'])
}
使用:this.方法名
vuex的actions
actions:{
方法名(store,value){
store:{
state:当前模块的state,
getters:当前模块的getters
rootState:根模块的state
rootGetters:根模块下的getters
commit:调用mutations的方法
调用当前模块的mutations :store.commit('mutations方法名',实参值)
dispatch:调用actions的方法
调用当前模块的actions:store.dispatch('actions方法名',实参值)
}
}
}
mapActions
1:导入 import {mapActions} from 'vuex'
2: 定义
methods:{
...mapActions(['方法名'])
}
3:使用:
this.方法名(实参值)
1.书写指定路由
// 1.下包
import Vue from 'vue'
// 2.导包
import VueRouter from 'vue-router'
// 3.注册
Vue.use(VueRouter)
// 4.创建对应路由
const routes = [
{
path: '/',
//这个是异步路由懒加载.可以在项目上线之前修改成这样.
//作用是第一次打开页面得时候加载对应得需求.节约请求资源.懒加载
component: () => import('../views/Login/index.vue')
},
]
// 5.实例化
const router = new VueRouter({
routes
})
// 6.暴露
export default router
2.main.js中导入
import router from './router'
//然后在
new Vue({
router
})
3.创建对应的axios请求地址
// 导入 axios
import axios from 'axios'
import router from '../router/index'
// 全局挂载axios
axios.defaults.baseURL = 'http://www.liulongbin.top:3008'
// 导出axios
export default axios
-----------------------------------------------------------
4.使用axios
import request from './request'
export const cateFrom = () => {
return request({
method: 'get',
url: '/my/cate/list'
})
}
5.创建vuex
import { cateFrom } from '../api/art'
export default {
namespaced: true,
state: {
art: []
},
mutations: {
serArtList (state, artList) {
state.art = artList
}
},
actions: {
async AgetArtList (context) {
const res = await cateFrom()
console.log(res)
context.commit('serArtList', res.data.data)
}
}
}
6.创建modules
import Vue from 'vue'
import Vuex from 'vuex'
-------------
import user from './user'
import art from './article'
import list from './artlist'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
getters: {
},
actions: {
},
modules: { user, art, list }
})
7.通过映射在对应的位置使用对应的函数
import { mapActions, mapGetters } from 'vuex'
methods: {
...mapActions('user', ['AgetUserFrom']),
}
computed: {
...mapGetters('user', ['userName', 'userImg'])
}
8.在初始化页面中使用
created () {
this.AgetUserFrom()
},
高级使用方式,
//当没有实参得时候一定要书写规范.添加一个null在里面.
user:{
actions:{
refreshUser(store){
store:{
state:当前模块的state数据,
rootState:根模块下的state数据
rootState.模块名.属性名
commit:调用mutations方法
调用本模块的mutations方法: commit('本模块的mutations方法名',实参值)
调用其它模块的mutations方法:commit('模块名/方法名',实参值(没有用null点位),{root:true})
dispatch:调用actions方法
调用本模块actions方法:dispatch('本模块的actions方法',实参)
调用其它模块的actions方法:dispatch('模块名/方法名',实参(没有用null占位),{root:true})
getters:调用getters方法
getters.本模块的getters方法名
rootGetters:调用根模块下的getters方法
调用其它模块的getters:rootGetters['模块名/其它模块getters方法']
}
}
},
getters:{
方法名(state,getters,rootState,rootGetters){
state:当前模块的state数据,
rootState:根模块下的state数据
rootState.模块名.属性名
getters:调用getters方法
getters.本模块的getters方法名
rootGetters:调用根模块下的getters方法
调用其它模块的getters:rootGetters['模块名/其它模块getters方法']
}
}
},
home