Vuex中的核心特性
vuex核心概念
state 存储数据
getters 获取数据的方式
mutations 修改数据的方式
actions 通过后台更改操作异步数据的方式
1State★★★★★
vuex中的数据源，我们需要保存的数据就保存在这里，可以在页面中在计算属性computed里通过 this.$store.state来获取我们定义的数据；
2Mutation★★★★★
mutations是操作state数据的方法的集合，比如对该数据的修改、增加、删除等等。
3Action★★★★★
由于直接在mutation方法中进行异步操作，将会引起数据失效。所以提供了Actions来专门进行异步操作，最终提交mutation方法。
Actions中的方法有两个默认参数
-
context上下文(相当于箭头函数中的this)对象 -
payload挂载参数。
4Getter★★★★★
可以对state中的成员加工后传递给外界
Getters中的方法有两个默认参数
-
state 当前VueX对象中的状态对象
-
getters 当前getters对象，用于将getters下的其他getter拿来用
在组件中的使用方法：可以在页面中在计算属性computed里通过 this.$store.getters来获取计算后的数据；
5Module★★★★
当项目庞大，状态非常多时，可以采用模块化管理模式。Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。
Vuex中的核心特性的使用 (state、Getters、motation)
<title>Vuex中的核心特性的使用</title>
<style>
.app{
display: flex;
/* 水平垂直居中 */
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
</style>
</head>
<body>
<div id="app" class="app">
<!-- 使用 -->
<good-list></good-list>
<good-total></good-total>
</div>
<template id="goodlist">
<div>
<h1>商品列表</h1>
<table width="750" border="1">
<tr>
<th>商品编号</th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in goods" :key="index">
<td>{{item.id}}</td>
<td>{{item.goodname}}</td>
<td>{{item.price}}</td>
<td>{{item.num}}</td>
<td>{{item.total}}</td>
<td>
<!-- 删除的是哪一项 所以是 id -->
<button @click="del(item.id)">删除</button>
</td>
</tr>
</table>
</div>
</template>
<template id="goodtotal">
<div>
<h1>商品总价：¥ <span style="color: mediumslateblue;">{{goodtotal}}</span> 元</h1>
</div>
</template>
<script src="./js/vue.js"></script>
<!-- 1.引入vuex 核心插件 -->
<script src="./js/vuex.min.js"></script>
<!-- 引入 axiosku -->
<script src="./js/axios.min.js"></script>
<script>
// 2.使用vuex插件
Vue.use(Vuex);
// 3.创建数据仓库实例(存公共数据 及对其进行管理)--是一个对象
var store = new Vuex.Store({
// 5.造数据
// (1).存储数据
state:{
totalPrice:0,
goods:[
{
id:1,
goodname:'戴尔笔记本',
price:3999,
num:30,
total:0,
},
{
id:2,
goodname:'惠普打印机',
price:1560,
num:10,
total:0,
},
{
id:3,
goodname:'戴尔台式电脑',
price:4580,
num:100,
total:0,
},
{
id:4,
goodname:'小米音响',
price:800,
num:300,
total:0,
}
]
},
// (2)数据计算处理 （ 获取数据的方式）
getters:{
// 对state中的商品列表goods进行数据重构
getGoods(state){
var goods = state.goods;
// 对数据进行遍历
goods.forEach((value)=>{
value.total = value.price * value.num;
})
return goods;
},
// 对state中的 totalPrice所有商品的总价进行处理
getPrice(state){
var y = state.totalPrice;
var goods = state.goods;
// 对数据进行遍历
goods.forEach((value)=>{
y += value.price * value.num; // += 累加之和
})
return y;
// var t = state.totalPrice
// var goods = state.goods;
// // 遍历
// goods.forEach((item)=>{
// t += item.price * item.num
// })
// return t
}
},
// (3)修改数据的方式mutation
mutations:{
del(state,id){
console.log('我接收到的值是：' +id);
// 定义临时变量 用来存 索引值的
var s;
var goods = state.goods;
// 遍历
goods.forEach((item,index)=>{
if(item.id == id){
s = index;
}
})
console.log('我打算删你，你的索引是：'+s);
// 删除（万能删除）
goods.splice(s,1)
}
},
// （4）异步操作数据action
action:{
loadingGoods(){
}
}
});
// 创建2个组件 --- 两个组件 去数据仓库中 拿各自 所需要的数据
// 商品总价组件
var goodTotal = {
template:'#goodtotal',
computed:{
goodtotal(){
// return this.$store.state.totalPrice; // 当前组件 去 仓库的 数据源state上 拿totalPrice的数据
return this.$store.getters.getPrice // 当前组件去仓库的getters 上 调用执行getPrice方法
}
}
}
// 商品列表组件
var goodList = {
template:'#goodlist',
computed:{
goods(){
// return this.$store.state.goods; // 当前组件， 去仓库的 数据 源state上 拿goods的数据
return this.$store.getters.getGoods; // 当前组件去仓库的getters上 调用执行 getGoods方法
}
},
methods:{
del(id){
console.log(id);
// 使用 this.$store.commit()方法 去调用执行 数据仓库中的mutation 里的del方法
this.$store.commit('del',id)
}
}
}
// 根组件
var a = new Vue({
// 模板选择器
el:'#app',
// 4.挂载仓库
// store:store, // 全写
store, // 简写
// 数据中心
data(){
return {
}
},
// 方法中心
methods:{
},
components:{
goodList,
goodTotal
}
})
</script>actions 的使用：
1、data数据库里list.json里建立的代码
{
"data":[
{
"id":1,
"goodname":"戴尔笔记本",
"price":3999,
"num":30,
"total":0
},
{
"id":2,
"goodname":"惠普打印机",
"price":1560,
"num":10,
"total":0
},
{
"id":3,
"goodname":"戴尔台式电脑",
"price":4580,
"num":100,
"total":0
},
{
"id":4,
"goodname":"小米音响",
"price":800,
"num":300,
"total":0
}
]
}
2、在我们造的数据里使用action方法：
<title>Vuex中的核心特性的使用</title>
<style>
.app{
display: flex;
/* 水平垂直居中 */
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
</style>
</head>
<body>
<div id="app" class="app">
<!-- 使用 -->
<good-list></good-list>
<good-total></good-total>
</div>
<template id="goodlist">
<div>
<h1>商品列表</h1>
<table width="750" border="1">
<tr>
<th>商品编号</th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in goods" :key="index">
<td>{{item.id}}</td>
<td>{{item.goodname}}</td>
<td>{{item.price}}</td>
<td>{{item.num}}</td>
<td>{{item.total}}</td>
<td>
<!-- 删除的是哪一项 所以是 id -->
<button @click="del(item.id)">删除</button>
</td>
</tr>
</table>
</div>
</template>
<template id="goodtotal">
<div>
<h1>商品总价：¥ <span style="color: mediumslateblue;">{{goodtotal}}</span> 元</h1>
</div>
</template>
<script src="./js/vue.js"></script>
<!-- 1.引入vuex 核心插件 -->
<script src="./js/vuex.min.js"></script>
<!-- 引入 axiosku -->
<script src="./js/axios.min.js"></script>
<script>
// 2.使用vuex插件
Vue.use(Vuex);
// 3.创建数据仓库实例(存公共数据 及对其进行管理)--是一个对象
var store = new Vuex.Store({
// 5.造数据
// (1).存储数据
state:{
totalPrice:0,
goods:[]
},
// (2)数据计算处理 （ 获取数据的方式）
getters:{
// 对state中的商品列表goods进行数据重构
getGoods(state){
var goods = state.goods;
// 对数据进行遍历
goods.forEach((value)=>{
value.total = value.price * value.num;
})
return goods;
},
// 对state中的 totalPrice所有商品的总价进行处理
getPrice(state){
var y = state.totalPrice;
var goods = state.goods;
// 对数据进行遍历
goods.forEach((value)=>{
y += value.price * value.num; // += 累加之和
})
return y;
// var t = state.totalPrice
// var goods = state.goods;
// // 遍历
// goods.forEach((item)=>{
// t += item.price * item.num
// })
// return t
}
},
// (3)修改数据的方式mutation
mutations:{
del(state,id){
console.log('我接收到的值是：' +id);
// 定义临时变量 用来存 索引值的
var s;
var goods = state.goods;
// 遍历
goods.forEach((item,index)=>{
if(item.id == id){
s = index;
}
})
console.log('我打算删你，你的索引是：'+s);
// 删除（万能删除）
goods.splice(s,1)
},
setGoods(state,params){
console.log('我接收到的数据是：');
// console.log(params);
state.goods = params
console.log(state.goods);
}
},
// 异步操作(修改)数据 action
actions:{
// 获取服务器端 接口中的数据
loadingGoods(state){
// 发送异步请求
var apiUrl = './data/list.json'
axios.get(apiUrl)
.then((response)=>{
console.log(response.data.data);
// 将获取到的 后端数据 提交发送给 moutations里的setGoods方法
// 这里 要调用setGoods 方法 然后在赋值给上面的 setGoods里的 params 使用
store.commit('setGoods',response.data.data)
})
.catch((err)=>{
console.log(err);
})
}
}
});
// 创建2个组件 --- 两个组件 去数据仓库中 拿各自 所需要的数据
// 商品总价组件
var goodTotal = {
template:'#goodtotal',
computed:{
goodtotal(){
// return this.$store.state.totalPrice; // 当前组件 去 仓库的 数据源state上 拿totalPrice的数据
return this.$store.getters.getPrice // 当前组件去仓库的getters 上 调用执行getPrice方法
}
}
}
// 商品列表组件
var goodList = {
template:'#goodlist',
computed:{
goods(){
// return this.$store.state.goods; // 当前组件， 去仓库的 数据 源state上 拿goods的数据
return this.$store.getters.getGoods; // 当前组件去仓库的getters上 调用执行 getGoods方法
}
},
methods:{
del(id){
console.log(id);
// 使用 this.$store.commit()方法 去调用执行 数据仓库中的mutation 里的del方法
this.$store.commit('del',id)
}
}
}
// 根组件
var a = new Vue({
// 模板选择器
el:'#app',
// 4.挂载仓库
// store:store, // 全写
store, // 简写
// 数据中心
data(){
return {
}
},
// 生命周期钩子函数
mounted(){
// 根组件，调用数据仓库this.$store.dispatch()方法，
// 目的： 调用执行 仓库中actions中的loadingGoods方法
this.$store.dispatch('loadingGoods')
},
// 方法中心
methods:{
},
components:{
goodList,
goodTotal
}
})
</script>预览效果：
1103
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
