微语:代码适合中午敲,早晚出BUG
vuex使用 Vue
vuex的五个状态
//1.存储数据
state: {
},
//2.修改数据
mutations: {
},
3.运算属性
getters: {
},
4.//异步(发送请求)
actions: {
},
5.模块化
modules: {
}
使用方法:
存储数据:
state: {
name:'张三',
infodata:{},
},
访问数据
this.$store.state.name
//推荐在计算属性里面访问
computed: {
x_name() {
return this.$store.state.name
}
}
修改数据
定义一个方法,接受2个参数,第一个指向state,第二个是传入的值
mutations: {
changname(state, val) {
state.name = val
},
data(state,val){
state.infodata=val
}
},
触发事件通过this.$store.commit('changname', '李四')进行修改,传入2个参数,第一个是函数名,第二个修改的参数会被val接收。
代码示例
<button @click="a">点击发送修改/button>
<script>
export default {
methods: {
a() {
this.$store.commit('changname', '野马')
}
},
}
发送请求
//异步(发送请求)
//在顶部引入:import { $_ShopEeller } from '@/apis/index.js'
actions: {
async info (infos){ //infos,用于触发mutations里面修改方法
let res = await $_ShopEeller()
infos.commit('data',res)//data 定义修改的方法,res=值
}
},
页面调用请求
created() {
//页面初始化触发actions里面请求info
this.$store.dispatch('info')
},
计算属性
getters: {
shoplist(state) {
let newarr = []
for (let key of state.goodlist) {
for (let chil of key.foods) {
if (chil.valueNum > 0) {
newarr.push(chil)
}
}
}
return newarr
}
},
调用方法
在计算属性computed内调用,方法:$store.getters.shoplist 有利于性能,当引用的数据发生改变才会重新计算,有缓存性,
接收一个参数,指向state(vuex数据存储的地方)通过state.名字可以访问到,state里面的数据。
computed: {
numzj() {
return this.$store.getters.shoplist
},
},
vuex 数据存储读取 Vue
1.在state定义空数组
state: {
goodsList:[],//商品列表
},
2.在 mutations里面写更新数据方法,payload 是传递过来的值,赋值给state下面的goodsList数组
mutations: {
// 存储商品
addGoods(state,payload){
state.goodsList=payload
}
},
3.吧获取到的数据传递给vuex 用this.$store.commit方法传递数据
// 把获取到的数据传递给vuex
this.$store.commit('addGoods',res.data.data)
4.在从computed里面读取存vuex储的数据
computed:{
// 从vuex里面读取商品数据
list(){
return this.$store.state.goodsList
}
}