基础知识
https://unpkg.com/vuex
<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>
npm install vuex --save
state
// 定义一个购物车模块，包含state仓库
const cart = {
state: {
commodity: [
{id: 1,name: "苹果手机",price: 399,num: 10},{id: 2,name: "苹果电脑",price: 1399,num: 21},]
},}
// 实例化出Vuex对象使用模块化管理该购物车模块
const store = new Vuex.Store({
modules: {
cart,}
})
// 根组件中注册Vuex实例
const app = new Vue({
el: "#app",store,})
return this.$store.state.模块名.仓库内容
<style>
th,td {
padding: 10px;
text-align: center;
}
</style>
<body>
<div id="app">
<cart></cart>
</div>
<!--购物车子组件模板-->
<template id="cart">
<div>
<table v-if="goods.length>0" border="1px" :style="{borderCollapse:'collapse'}">
<caption :style="{border:'1px solid #000',fontSize:'2rem'}">购物车</caption>
<thead>
<tr>
<th>商品编号</th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>价格小计</th>
</tr>
</thead>
<tbody>
<tr v-for="item in goods">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.num}}</td>
<td>{{item.num * item.price}}元</td>
</tr>
</tbody>
</table>
<h1 v-else>购物车没有任何商品</h1>
</div>
</template>
<script src="vuex.js"></script>
<script src="./vue.js"></script>
<script>
// 定义一个购物车模块，包含state仓库
const cart = {
state: {
commodity: [
{id: 1,}
})
// 定义子组件
Vue.component("cart",{
template:`#cart`,// 通过计算属性获取仓库内容
computed:{
goods(){
return this.$store.state.cart.commodity;
}
}
})
// 根组件中注册Vuex实例
const app = new Vue({
el: "#app",})
</script>
</body>
getters
this.$store.getters.模块getters中定义的方法名
const cart = {
state: {
...
},getters: {
totalPrice(state) {
...
}
}
}
<style>
th,td {
padding: 10px;
text-align: center;
}
</style>
<body>
<div id="app">
<cart></cart>
<total-price></total-price>
</div>
<!--购物车子组件模板-->
<template id="cart">
<div>
<table v-if="goods.length>0" border="1px" :style="{borderCollapse:'collapse'}">
<caption :style="{border:'1px solid #000',fontSize:'2rem'}">购物车</caption>
<thead>
<tr>
<th>商品编号</th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>价格小计</th>
</tr>
</thead>
<tbody>
<tr v-for="item in goods">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.num}}</td>
<td>{{item.num * item.price}}元</td>
</tr>
</tbody>
</table>
<h1 v-else>购物车没有任何商品</h1>
</div>
</template>
<script src="vuex.js"></script>
<script src="./vue.js"></script>
<script>
// 定义一个购物车模块，包含state仓库
const cart = {
state: {
commodity: [
{id: 1,getters: {
totalPrice(state) {
return state.commodity.reduce((pre,cur) => {
return pre + cur.price * cur.num;
},0);
}
}
}
// 实例化出Vuex对象使用模块化管理该购物车模块
const store = new Vuex.Store({
modules: {
cart,{
template: `#cart`,// 通过计算属性获取仓库内容
computed: {
goods() {
return this.$store.state.cart.commodity;
}
}
})
Vue.component("totalPrice",{
template: `
<div><h1>总价:{{ totalPrice }}</h1></div>`,computed: {
totalPrice() {
return this.$store.getters.totalPrice
}
}
})
// 根组件中注册Vuex实例
const app = new Vue({
el: "#app",})
</script>
</body>
<td><button type="button" @click="item.num++" :style={marginRight:'5px'}>+</button>{{item.num}}<button @click="item.num++" type="button" :style={marginLeft:'5px'}>-</button></td>
mutation
this.$store.commit('mutation中定义的方法',参数)
const cart = {
state: {
...
},getters: {
totalPrice(state) {
...
}
},mutations:{
del(state,param) {
...
}
}
}
<style>
th,fontSize:'2rem'}">购物车</caption>
<thead>
<tr>
<th>商品编号</th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>价格小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in goods">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button type="button" @click="item.num++" :style={marginRight:'5px'}>+</button>
{{item.num}}
<button @click="item.num++" type="button" :style={marginLeft:'5px'}>-</button>
</td>
<td>{{item.num * item.price}}元</td>
<td>
<button type="button" @click="del(item.id)">删除商品</button>
</td>
</tr>
</tbody>
</table>
<h1 v-else>购物车没有任何商品</h1>
</div>
</template>
<script src="vuex.js"></script>
<script src="./vue.js"></script>
<script>
// 定义一个购物车模块，包含state仓库
const cart = {
state: {
commodity: [
{id: 1,0);
}
},mutations: {
//删除购物车中的商品
del(state,param) {
// param传递过来的参数
for (let i = 0; i < state.commodity.length; i++) {
if (state.commodity[i].id == param) {
state.commodity.splice(i,1); // splice是响应式的
break;
}
}
}
}
}
// 实例化出Vuex对象使用模块化管理该购物车模块
const store = new Vuex.Store({
modules: {
cart,// 通过计算属性获取仓库内容
computed: {
goods() {
return this.$store.state.cart.commodity;
}
},// 通过methods与commit修改仓库内容
methods: {
del(id) {
this.$store.commit("del",id);
}
}
})
Vue.component("totalPrice",})
</script>
</body>
actions
const cart = {
state: {
...
},mutations:{
del(state,param) {
...
}
}
actions: {
load(state) {
...
}
}
}
return JsonResponse(
[
{"id": 1,"name": "苹果手机","price": 399,"num": 10},{"id": 2,"name": "苹果电脑","price": 1399,"num": 21},{"id": 3,"name": "华为手机","price": 299,"num": 29},{"id": 4,"name": "华为电脑","price": 1099,"num": 3},],safe=False,)
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<style>
th,fontSize:'2rem'}">购物车</caption>
<thead>
<tr>
<th>商品编号</th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>价格小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in goods">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button type="button" @click="item.num++" :style={marginRight:'5px'}>+</button>
{{item.num}}
<button @click="item.num++" type="button" :style={marginLeft:'5px'}>-</button>
</td>
<td>{{item.num * item.price}}元</td>
<td>
<button type="button" @click="del(item.id)">删除商品</button>
</td>
</tr>
</tbody>
</table>
<h1 v-else>购物车没有任何商品</h1>
</div>
</template>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="vuex.js"></script>
<script src="./vue.js"></script>
<script>
// 定义一个购物车模块，包含state仓库
const cart = {
state: {
commodity: []
},1); // splice是响应式的
break;
}
}
},// 设置商品
setCommodity(state,param) {
state.commodity = param.commodity
}
},actions: {
load(store) {
// 通过axios获取数据，然后再交给mutations操纵仓库，填充数据
axios.post("http://127.0.0.1:8000/commodity/getAll/").then(function (response) {
store.commit('setCommodity',{commodity: response.data})
})
}
}
}
// 实例化出Vuex对象使用模块化管理该购物车模块
const store = new Vuex.Store({
modules: {
cart,id);
}
},// 钩子函数，组件初始化完成后调用，请求后台数据
mounted() {
this.$store.dispatch('load');
}
})
Vue.component("totalPrice",})
</script>
</body>
modules
// 购物车模块
const cart = {
state: {
...
},getters: {
...
},mutations: {
...
},actions: {
...
}
}
// 仓库
const store = new Vuex.Store({
modules: {
cart,}
})
const store = new Vuex.Store({
state: {
...
},getters: {
...
},actions: {
...
}
})
// 根组件
const app = new Vue({
el: "#app",// 根组件中注册
})
// 非模块化
return this.$store.state.仓库内容
// 必须加上模块名
return this.$store.state.模块名.仓库内容
const cart = {
namespaced:true,// 添加命名空间后，getters/mutation/actions都将变成局部的
state: {
...
},getters: {
...
},mutations: {
...
},actions: {
...
}
}
this.$store.dispatch('actions下定义的方法');
变为
this.$store.dispatch('模块名/actions下定义的方法');
this.$store.getters.getters下定义的方法;
变为
this.$store.getters['模块名/getters下定义的方法'];
this.$store.commit('mutation下定义的方法',参数)
变为
this.$store.commit('模块名/mutation下定义的方法',参数)
服务热线 19970861797
