1.简介
就是用来多组件共享数据的实现用的
2.使用VueX
因为使用的是vue2 所以下的是vuex3 若是vue3 必须下的是 vue4
bash
npm i vuex@33.搭建环境
1.创建 src/store/index.js
javascript
//该文件用于创建一个Vuex中最为核心的store
//引入VueX
import Vuex from 'vuex'
import Vue from 'vue'
//准备 actions - 用于响应组件中的动作
const actions = {}
//准备 mutations - 用于操作数据(state)
const mutations = {}
//准备 state - 用于存储数据
const state = {}
Vue.use(Vuex)
//创建 store
const store = new Vuex.Store({
actions,
mutations,
state
});
//暴露store
export default store;2.main.js引入
javascript
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入vue-resource
import vueResource from 'vue-resource'
//引入store
import store from './store/index'
//关闭Vue的生产提示
Vue.config.productionTip = false
//应用插件
// import plugins from './plugins'
//使用插件
// Vue.use(plugins,1,3,2,5,6)
// const d = Vue.extend({});
// Vue.prototype.eventBus= new d();
//使用插件
Vue.use(vueResource)
//创建vm
new Vue({
el: '#app',
render: (h) => h(App),//放入构造出 App组件模板
store,
beforeCreate() {
Vue.prototype.$bus = this; //安装全局事件总线
// console.log(this);
}
})3.使用
store 下 建 index.js
javascript
//该文件用于创建一个Vuex中最为核心的store
//引入VueX
import Vuex from 'vuex'
import Vue from 'vue'
//准备 actions - 用于响应组件中的动作
const actions = {
jia(context,value){
console.log('actions中的jia被调用了',context ,value);
context.commit('JIA',value);
},
jian(context,value){
console.log('actions中的jian被调用了',context ,value);
context.commit('JIAN',value);
},
jiaOdd(context,value){
console.log('actions中的jiaOdd被调用了',context ,value);
if(context.state.sum % 2){
context.commit('JIA',value);
}
},
jiaWait(context,value){
console.log('actions中的jiaWait被调用了',context ,value);
setTimeout(() => {
context.commit('JIA',value);
}, 1000);
}
}
//准备 mutations - 用于操作数据(state)
const mutations = {
JIA(state,value){
console.log('mutations中的jia被调用了',state ,value);
state.sum+=value;
},
JIAN(state,value){
console.log('mutations中的jian被调用了',state ,value);
state.sum-=value;
}
}
//准备 state - 用于存储数据
const state = {
sum:0,
}
Vue.use(Vuex)
//创建 store
const store = new Vuex.Store({
actions,
mutations,
state
});
//暴露store
export default store;4.在组件中调用
javascript
<template>
<div>
<h2>当前求和为:{{ $store.state.sum }}</h2>
<select v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="increment">+</button>
<button @click="decrement">-</button>
<button @click="incrementOdd">当前求和为奇数再加</button>
<button @click="incrementWait">等一等再加</button>
</div>
</template>
<script>
export default {
name: "CountComponent",
data() {
return {
n: 1,
};
},
methods: {
increment() {
this.$store.commit("JIA", this.n);
},
decrement() {
this.$store.commit("JIAN", this.n);
},
incrementOdd() {
this.$store.dispatch("jiaOdd", this.n);
},
incrementWait() {
this.$store.dispatch("jiaWait", this.n);
},
},
};
</script>
<style scoped>
button {
margin-left: 5px;
}
</style>
4.getters的使用
相当于全局的计算属性
5.mapActions mapGetter mapState mapMutations
6. 多组件共享数据
直接调用里面的数据就行，都是共享的
7.模块化加命名空间
javascript
<template>
<div>
<h2>当前求和为:{{ sum }}</h2>
<h2>当前求和放大10倍为:{{ bigSum }}</h2>
<h2>我在{{ school }} 学习 {{ subject }}</h2>
<h2>Persion组件的总人数是:{{personList.length}}</h2>
<select v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="JIA(n)">+</button>
<button @click="JIAN(n)">-</button>
<button @click="jiaOdd(n)">当前求和为奇数再加</button>
<button @click="jiaWait(n)">等一等再加</button>
</div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
name: "CountComponent",
data() {
return {
n: 1,
};
},
computed: {
...mapState('countAbout',["sum", "school", "subject"]), //同名就可以这样写
...mapState('personAbout',['personList']), //同名就可以这样写
...mapGetters('countAbout',["bigSum"]),
},
methods: {
...mapMutations('countAbout',["JIA", "JIAN"]),
...mapActions('countAbout',["jiaOdd", "jiaWait"]),
}
};
</script>
<style scoped>
button {
margin-left: 5px;
}
</style>
javascript
<template>
<div>
<h1>人员列表</h1>
<h1>Count组件求和为:{{sum}}</h1>
<h3>列表中第一个人的名字是{{firstPersonName}}</h3>
<input type="text" placeholder="请输入名字" v-model="name">
<button @click="add">添加</button>
<button @click="addWang">添加一个姓王的人</button>
<button @click="addOfNet">添加一个网络请求的人</button>
<ul>
<li v-for="p in personList" :key="p.id">{{p.name}}</li>
</ul>
</div>
</template>
<script>
import {nanoid} from 'nanoid'
export default {
name:'PersonComponent',
data() {
return {
name:''
}
},
computed:{
personList(){
return this.$store.state.personAbout.personList;
},
sum(){
return this.$store.state.countAbout.sum;
},
firstPersonName(){
return this.$store.getters['personAbout/firstPersonName'];
}
},
methods:{
add(){
const personObj = {id:nanoid(),name:this.name};
console.log(this.$store);
this.$store.commit('personAbout/ADD_PERSON',personObj)
},
addWang(){
const personObj = {id:nanoid(),name:this.name};
console.log(this.$store);
this.$store.dispatch('personAbout/addPersonWang',personObj)
},
addOfNet(){
this.$store.dispatch('personAbout/addPersonServer')
}
}
}
</script>
<style>
</style>
javascript
//该文件用于创建一个Vuex中最为核心的store
//引入VueX
import Vuex from 'vuex'
import Vue from 'vue'
import countOptions from './count'
import persionOptions from './person'
Vue.use(Vuex)
//创建 store
const store = new Vuex.Store({
modules: {
countAbout: countOptions,
personAbout: persionOptions
}
});
//暴露store
export default store;
javascript
//人员管理相关配置
import axios from "axios";
import { nanoid } from "nanoid";
export default {
namespaced: true,
actions: {
addPersonWang(context, value) {
if (value.name.indexOf('王') === 0) {
context.commit('ADD_PERSON', value);
}
},
addPersonServer(context){
axios.get('http://localhost:8080/atjmj/students/atjmj').then(res => {
console.log(res.data);
context.commit('ADD_PERSON', {id: nanoid(), name: res.data[0].name});
}).catch(err => {
console.log(err);
})
}
},
mutations: {
ADD_PERSON(state, value) {
console.log('mutations中的ADD_PERSON被调用了', state, value);
state.personList.unshift(value);
}
},
state: {
personList: [
{ id: '001', name: '张三' }
]
},
getters: {
firstPersonName(state) {
return state.personList[0].name;
}
}
}
javascript
//求和相关配置
export default {
namespaced: true,
actions: {
jiaOdd(context, value) {
console.log('actions中的jiaOdd被调用了', context, value);
if (context.state.sum % 2) {
context.commit('JIA', value);
}
},
jiaWait(context, value) {
console.log('actions中的jiaWait被调用了', context, value);
setTimeout(() => {
context.commit('JIA', value);
}, 1000);
}
},
mutations: {
JIA(state, value) {
console.log('mutations中的jia被调用了', state, value);
state.sum += value;
},
JIAN(state, value) {
console.log('mutations中的jian被调用了', state, value);
state.sum -= value;
}
},
state: {
sum: 0,
school: '尚硅谷',
subject: '前端',
},
getters: {
bigSum(state) {
return state.sum * 10;
}
}
}
javascript
<template>
<div class="appContainer">
<CountComponent/>
<PersonComponent/>
</div>
</template>
<script>
import CountComponent from './components/CountComponent.vue';
import PersonComponent from './components/PersonComponent.vue';
export default {
name: "App",
components: {
CountComponent,PersonComponent
},
methods: {},
};
</script>
<style scoped>
.appContainer {
padding: 5px;
display: flex;
flex-direction: column; /* 垂直方向排列子元素 */
justify-content: center;
align-items: center;
}
</style>