1.store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 1 下载vuex 导入 use一下
// 2 new Vuex.Store
// 3 挂载到new vue上
export default new Vuex.Store({
state: {
// 在这里写的就是所有组件都能有 全局数据了
// 名字:值
// 如果我1000个全局数据 有可能重名
count:100
},
mutations: {
countMutation(state){
// state 就是那个全局state
console.log('mutation触发了',state)
state.count++
}
},
actions: {
// action对应的函数
countAction(obj){
console.log('action触发了',obj)
// obj对象 里面有commit
obj.commit("countMutation")
}
},
// modules 在store全局数据 是可以来分模块管理的
// 他可以用来区分每个不同模块的数据
// 15:10 上课
modules: {
// 模块:{ 一套state action mutation }
m1: {
namespaced: true,//开启命名空间大白话 他是m1下的 不会影响其他人
// 模块内容(module assets)
state: { // 模块内的状态已经是嵌套的了,使用 `namespaced` 属性不会对其产生影响
m1Name:"我是m1模块的m1Name"
},
actions: {
loginAction () {
console.log('m1的action')
} // -> dispatch('m1/loginAction')
},
mutations: {
loginMutation () {
console.log('loginMutation-执行啦')
} // -> commit('m1/loginMutation')
}
},
home:{
namespaced: true,
state:{
count:1
}
},
about:{
namespaced: true,
state:{
count:100
},
actions:{
}
// 。。。刚刚的可以每个来一套
},
// 数据可以再写 user用户模块 system 系统模块
}
})
2. Demo.vue
<template>
<div class="home">
<!-- home啊
<hr>
{{$store.state.m1.m1Name}}
<button @click="add">点击</button> -->
<!-- <hr> -->
<!-- <my-swiper :list="list"></my-swiper> -->
<button @click="getAll">发送请求</button>
home组件啊
<hr>
<h1>count的值:{{$store.state.count}}</h1>
<button @click="addCount">让全局count+1</button>
<hr>
<h2>m1下的全局数据 {{$store.state.m1.m1Name}} </h2>
<button @click="add">点击修改某个模块的数据</button>
<!-- 3 哪个组件要用 就直接 使用注册的组件标签名 -->
<hr>
<!-- 用组件 传了list数据进去 -->
<my-swiper :list="list"></my-swiper>
</div>
</template>
<script>
// 要在组件使用全局数据
// 1 在html范围 直接 $store.state.名字
// 2 在js范围 this.$store.state.名字
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import { mapMutations , mapActions ,mapState } from 'vuex'
export default {
name: 'Home',
components: {
// HelloWorld
},
data(){
return {
list:[
{id:1,src:'http://122.51.238.153/images/1.jpg'},
{id:2,src:'http://122.51.238.153/images/2.jpg'},
{id:3,src:'http://122.51.238.153/images/3.jpg'},
{id:4,src:'http://122.51.238.153/images/4.jpg'}
]
}
},
created(){
console.log('created')
console.log('store',this.$store)
},
mounted(){
console.log("home 的 mounted")
},
methods:{
// 这句话的意思是 直接 解构出 全局 m1模块下的 loginMutation
// 把loginMutation 放到this上 并且帮你写好了 commit
// 相当于帮你简化了代码
...mapMutations('m1', ['loginMutation']),
//不是modules的直接写 ...mapMutations( ['loginMutation'])
add(){
// console.log('add',this)
// console.log('add',this.$route.meta)
// this.$store.commit("m1/loginMutation")
// 或者下面的 先mapMutations 相当于帮你写了commit
this.loginMutation()
// this.$store.commit("m1/loginMutation")
// 和刚刚的思路 就是加上一个模块前缀 m1/
// this.$store.dispatch("m1/loginAction")
},
async getAll(){
// http://localhost:8080/
// 请求 http://122.51.238.153/getok.php
// let res=await this.$http.get("http://122.51.238.153/getok.php")
// console.log('res',res)
let res=await this.$http.get("/api/getok.php")
console.log('res',res)
},
addCount(){
// 让全局数据count+1
// 1 正常情况
// dispatch 触发action
// -》commit触发mutation
// -》在mutation修改全局数据
//2 其他情况 可以直接跳过action 但是必须mutation修改
// console.log('$store',this.$store)
// this.$store.dispatch( 'countAction' )
this.$store.commit("countMutation")
}
}
}
</script>