Vuex的基本概念，和Vuex中的 state，getters，mutations
作者：互联网
1.基本概念
Vuex 是一个专为 Vue.js 应用程序开发的(数据的)状态管理模式。
Vuex采用“集中式存储管理”方式去管理数据，把 这些数据 应用到 所有组件上 ！！！
vuex就是仓库---数据仓库--这个数据仓库里的所有的数据，是为组件来使用的！为组件来服务的！
vuex 只 做 “数据” 的维护！！
对vuex仓库中数据的处理，我们都放在“模型”里面。在vuex这个仓库 store 里面。
2.vuex核心概念
state 存储数据
getters 获取数据的方式
mutations 修改数据的方式
actions 通过后台更改操作异步数据的方式
以上，这几个 都是对象
3.下载和使用
下载
（1）使用script标签引入
直接引用
https://unpkg.com/vuex@3.6.2/dist/vuex.js
下载本地,引用
<script src="/js/vue.js"></script>
<script src="/js/vuex.js"></script>（2）安装vuex
npm install vuex --save
（3）使用vuex
安装后，在工程化项目中，使用Vuex插件之前需要在main.js入口文件中
a.使用import方式引入Vuex
import Vuex from 'vuex'b.使用Vuex的插件引入函数Vue.use()使用Vuex
Vue.use(Vuex);（4）创建数据仓库
创建数据仓库
var store = new Vuex.Store({})首先来看一下，state的使用
1.先引入插件，在创建好根实例，使用vuex，并创建数据仓库
<script src="./js/vue.js"></script>
<!-- 一定要在vue插件下面引入vuex插件 -->
<script src="./js/vuex.js"></script>
<script>
// 使用Vuex
Vue.use(Vuex)
// 创建数据仓库（存储数据）
let store = new Vuex.Store({})
let vm = new Vue({
el:'#app',
// 引入vuex插件
store,
})
</script>2.在数据仓库中的state中定义好公共数据
let store = new Vuex.Store({
// state 用来存放数据(类似于组件中的data数据中心)
state:{
zongjia:0,
goods:[
{
id:1,
name:'笔记本',
price:1,
num:10
},
{
id:2,
name:'手机',
price:2,
num:100
},
{
id:3,
name:'平板',
price:10,
num:100
}
]
}
})3.我们在 计算属性中 使用 this.$store.state.xxx 获取 数据仓库中state中的数据
但是要注意的是：组件 访问数据仓库store 中的公共数据，组件 必须 使用 计算属性 computed
computed:{
// 去仓库中拿总价这条数据
tozongjia(){
return this.$store.state.zongjia
},
// 拿goods数据
goods(){
return this.$store.state.goods
}
}4.组件 通过 计算属性 computed 拿到 数据仓库 数据，将数据 显示在 该组件的 视图层
<template id="child">
<div>
<h1>我是child子组件</h1>
<hr>
<table border="1" width="600px">
<tr>
<th>商品id</th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
</tr>
<tr v-for="(i,index) in goods">
<td>{{i.id}}</td>
<td>{{i.name}}</td>
<td>{{i.price}}</td>
<td>{{i.num}}</td>
</tr>
</table>
<hr>
<p>商品总价为{{tozongjia}}</p>
</div>
</template>
下面接着看 getters的使用
先说一下getters
getters 获取仓库里面的数据
getters 这个是获取仓库里的数据
获取数据的时候，如果 说 你 想在 获取的时候 对数据 进行 计算。
通过 计算 改 state中的数据的状态
(计算---你去做事情，你做的事情，写在哪里？写在方法里，或者 我们说 写在函数里)
(使用getters，它就有逻辑了，它就能思考了。)
getters:{
下面这3种写法 均可。
totalPrice:state=>{
},
totalPrice:function(state){
},
totalPrice(state){
}
}继续接着上面这个例子，使用getters计算每一件商品的总价
1.先在视图层做些小改动，多出一列来显示单个商品总价：
<table border="1" width="600px">
<tr>
<th>商品id</th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>单个商品总价</th>
</tr>
<tr v-for="(i,index) in goods">
<td>{{i.id}}</td>
<td>{{i.name}}</td>
<td>{{i.price}}</td>
<td>{{i.num}}</td>
<td>{{i.jiage}}</td>
</tr>
</table>2.在数据仓库的goods每一个对象中新添一个 jiage,为每个商品总价：
goods:[
{
id:1,
name:'笔记本',
price:1,
num:10,
jiage:0
},
{
id:2,
name:'手机',
price:2,
num:100,
jiage:0
},
{
id:3,
name:'平板',
price:10,
num:100,
jiage:0
}
]3.获取数据的时候，如果 说 你 想在 获取的时候 对数据 进行 计算。
getters:{
//如果想对state中的数据进行计算，就需要传参 state
getgoods(state){// 这里等于对state中的goods进行重构了
// 对goods进行遍历
state.goods.forEach((v) =>{
// 商品的单价乘以商品的数量，就等于单个商品总价
v.jiage = v.price*v.num
})
return state.goods
}
}4.这时候结果是出不来的，因为getters中的方法已经把state中的goods进行了改变，所以：
goods(){
// 所以在这里要拿取的就是被getters重构后的goods了，所以这里的state要改成getters
// 而且后面拿的的也不是goods了，是getters中的方法名
return this.$store.getters.getgoods
}查看结果：
5.同样的原理，使用getters计算出所有商品总价
getzongjia(state){
let sum = 0;
state.goods.forEach((v) =>{
sum+=v.jiage
})
return sum
} tozongjia(){
return this.$store.getters.getzongjia
},
下面接着看 mutations的使用
首先看一下this.$store.commit():同步操作，写法：
this.$store.commit('mutations里的方法名',值)
或者
在仓库中的actions里这样写：
store.commit('mutations里的方法名',值)
------------------
mutations 修改仓库里面的数据
mutations 这个是修改仓库里的数据。(同步修改)
我们使用vuex数据仓库中的state和getters 获取数据，但是 现在唯独不能改这里的数据。我们是 用 mutations 改仓库中的数据！
在组件中，想要操作 仓库里面的数据，我们使用commit() “调用” mutations里面的方法
this.$store.commit('mutations里面的方法',值)
例如：
this.$store.commit('del',{id})
'del'---第一个参数 是 仓库里 mutations里面的 方法
{id} ---第二个参数 是 传递给 仓库里mutations方法里的 参数
----------
1.在这里继续接着上面这个例子，在每一项后面添加一个删除按钮，当点击时，删除对应的那一项
<!-- 添加删除按钮，并传入参数id -->
<td>
<button @click="del(i.id)">删除</button>
</td>2.数据时组件child通过数据仓库获取的，所以在child组件的方法中心写上方法
methods:{
del(id){
// 当你点击按钮时，获取到的id值，通过commit()方法，把id的值，传递给mutations中的del方法去使用
this.$store.commit('del', id)
}
}3.在数据仓库的mutations中，接收参数，并添加方法
mutations:{
// 删除购物车中的商品
//state---第一个参数，是仓库中的state
//param---第二个参数，是你(组件) 传递过来 的参数id
del(state,param){//注意，第一个参数必须要有
// 定义一个空变量
let k;
state.goods.forEach((v,index) =>{
// 在遍历的过程中，当前这项的id等于传入的id时
if(v.id == param){
// 把当前的索引值赋值给k
k = index
}
})
// k有了值以后，从第k个开始，删除1个
state.goods.splice(k,1)
}
}
标签：goods,getters,mutations,state,Vuex,id,store 来源： https://blog.csdn.net/lolhuxiaotian/article/details/122070414