好久未更新,今天更新一下vuex,之后就可以做简单的项目了。可能会断更几天!!
1.vuex基础使用(安装,引入,使用,挂载)
1.安装 cnpm i vuex --save
2.import Vuex from 'vuex'
3.Vue.use(Vuex)
4.const store = new Vuex.Store({})
5.new Vue({
store,
})
2.vuex的四个属性
state:数据
mutations:修改数据(方法)常用于同步方法
actions:给组件派发动作(执行方法)常用于处理异步操作
getters:将state中的数据批量导出,可以得到计算属性
state:
state:{
name:'张三',
age:20
},
mutations:
(1)vuex 是单向数据流 不支持表单的双向绑定
(2)state:默认第一个参数指的就是当前store中的state 不可修改
(3 专门修改state中的数据
// 操作数据的方法
mutations:{
changeName(state){
state.name = '李四'
},
changeAge(state){
state.age='15'
},
changeN(state,name){
state.name = name;
}
},
actions:
(1)进行逻辑或异步操作
(2)context就是当前的仓库
actions:{
// context 指的就是当前所在的仓库store
name(context){
setTimeout(() => {
context.commit('changeName')
}, 1000);
},
alert(context){
alert(123)
}
},
getters:
(1)批量导出数据给组件用
(2)可以得到计算属性
(3) 将状态层的数据,导出给组件使用
getters:{
// state 初始数据
myname(state){
return state.name
},
myage(state){
return state.age
},
say(state){
return `我叫${state.name},今年${state.age}岁了`
}
}
3.vuex中辅助函数的使用
(1)mapGetters 是vuex提供的辅助函数 对应的vue中的computed属性,
(2)mapActions 是vuex提供的辅助函数 对应的vue中的methods方法
(3)mapGetters 、mapActions里面可以写数组也可以写对象,写数组的时候不可以进行重命名
// ...mapGetters([
// 'myname',
// 'myage',
// 'say'
// ])
在需要的组件中导入辅助函数
import { mapGetters,mapActions} from "vuex";
computed: {
...mapGetters({
myname:'myname',
aaAge:'myage',
aaSay:'say'
})
},
methods: {
...mapActions({
mname:'name',
alert:'alert'
}),
cc(){
alert(11)
}
},
在页面直接调用属性名
<p>{{myname}}</p>
<p>{{aaAge}}</p>
<p>{{aaSay}}</p>
<hr>
<hr>
<button @click="mname">间隔1秒修改姓名</button>
4.在vue项目中使用vuex
整体流程
1.创建项目,配置目录,初始化
2.配置路由
3.创建目录结构,src目录下创建store文件夹
4.配置仓库 store文件夹》index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
需要在index中配置
配置 state,mutations,actions,getters
导出 export default new Vuex.Store({state,mutations,actions,getters })
为了简化,还可以将 state,mutations,actions,getters 拿出来,组成modules文件夹,形成仓库。进行抛出,在index中移入
modules文件夹下:
import {reqList} from "../../util/request"
const state = {
list:[]
}
const mutations = {
changeList(state,arr){
state.list = arr
}
}
const actions = {
reqMenuList(context){
}
}
const getters = {
list(state){
return state.list
}
}
export default {
state,
mutations,
actions,
getters,
namespaced:true
}
index中进行引入注册
import Vue from "vue"
import Vuex from 'vuex'
Vue.use(Vuex)
import list from "./modules/list.js"
import role from "./modules/role.js"
export default new Vuex.Store({
modules:{
list,
role
}
})
5.如果项目有数据请求,此时需要去配置util->request.js,在进行接下来的代码之前,别忘了解决跨域问题。
config》index.js
proxyTable: {
'/api':{
target:'http://localhost:3000',
changeOrigin:true,
pathRewrite:{
'^/api':'http://localhost:3000'
}
}
},
util->request.js
import axios from 'axios'
const baseUrl = '/api'
// 请求美食
export const reqFood = ()=>{
return axios({
url:baseUrl+'/foodList',
method:'get'
})
}
6.添加 state,mutations,actions,getters 内容
state:
const state={
foods:[],//美食列表数据
fDtail:{},//美食详情
movie:[],
mDetail:{}
}
mutations:
const mutations={
// 定义所有的方法
changeMovie(state,arr){
state.movie = arr
},
changeFood(state,arr){
state.foods = arr
},
changemDetail(state,obj){
state.mDetail = obj
},
changefDetail(state,obj){
state.fDtail = obj
}
}
actions:
const actions={
// 美食列表
requsetFood(context){
reqFood().then(res=>{
console.log(res)
context.commit('changeFood',res.data.data)
})
},
// 美食列表详情
requestFoodDetail(context,id){
reqFoodDetail(id).then((res)=>{
console.log(res)
context.commit('changefDetail',res.data.detail)
})
}
}
getters:
const getters={
// 导出数据的方法名
foods(state){
return state.foods
},
foodDetail(state){
return state.fDtail
}
}
7.页面渲染
(1)页面需要一加载就需要请求数据所以需要在mounted中调用
(2)之后往页面渲染,那么此时渲染的数据就是从mapGetters里面解构出来的,直接在页面渲染即可。
import { mapActions, mapGetters } from "vuex";
computed: {
...mapGetters({
foods:'foods'
})
},
methods: {
...mapActions({
requsetFood: "requsetFood",
}),
toDetail(id){
this.$router.push('/foodDetail/'+id)
}
},
mounted() {
this.requsetFood()
console.log(foods)
},
之后往页面渲染,那么此时渲染的数据就是从mapGetters里面解构出来的,直接在页面渲染即可。
5.补充知识点
export default 和 export的使用
5.1.export default
//导出方 一个文件中只能有一个export default
export default store
//引入方
import aa from "./store"
5.2 export
//导出方 :一个文件中可以有很多export
export const x =10;
export const y =10;
export const store =new Vuex.Store({});
export default [1,2,3]
//引入方
import arr,{x,y,store} from "./store"