概念:专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个数组的共享状态进行集中式管理(读/写),这也是一种组件间通信的方式,且适用于任意组件间通信。
使用场景:
- 多个组件依赖同一个状态
- 来自不同组件的行为需要变更同一状态
vuex项目建立步骤
- 引入
npm i vuex@3
注意:
使用vue2的脚手架,则安装vuex3
使用vue3的脚手架,则安装vuex4
- 在App.vue中引入
import store from './store/index'
- store(用于创建Vuex中最为核心的store)
新建文件夹store,与components同一级
在store文件夹下新建index.js文件
index.js文件
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
const actions={} //用于响应组件中的动作
const mutations={} //用于操作数据
const state={} //用于存储数据
//创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state
})
- 在App.vue文件(引入store)
<template></template>
<script>
......
new Vue({
......
store
......
})
......
</script>
步骤顺序:1,3,24
具体使用:
P.vue文件
<template></template>
<script>
export default {
data(){
return {
n:1
}
},
methods:{
add(){
this.$store.dispatch('jia',this.n)
}
}
}
</script>
store index.js文件
......
const actions={
jia(context,value){
context.commit('JIA',value)
}
}
const mutations={
JIA(state,value){
state.sum+=value
}
}
const state={
sum=0
}
......
组件中读取vuex中的数据:
$store.state.sum
组件中修改vuex中的数据:$store.dispatch('actions中的方法名',数据)
或$store.commit('mutations中的方法名',数据)
若没有网络请求或其他业务逻辑,组件中也可以越过actions,即不写diapatch,直接编写commit
具体例子
项目结构
index.js文件
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
const actions={}
const mutations={
Add(state,value){
state.personlist.unshift(value)
// console.log(value.pname);
// console.log(value.id);
}
}
const state={
personlist:[]
}
export default new Vuex.Store({
actions,
mutations,
state
})
App.vue文件
<template>
<div>
<Person></Person>
</div>
</template>
<script>
import Person from './components/Person.vue'
export default ({
name:'App',
components:{
Person
}
})
</script>
main.js文件(引入store)
import Vue from 'vue'
import App from './App.vue'
import store from './store/index'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
store
}).$mount('#app')
Person.vue文件
<template>
<div>
<input type="text" placeholder="请输入要添加的姓名" v-model="name">
<button @click="add()">添加</button>
<ul>
<li v-for="p in personList" :key="p.id">{{p.name}}</li>
</ul>
</div>
</template>
<script>
// import {mapMutations,mapState} from 'vuex'
import {nanoid} from 'nanoid'
export default{
name:'School',
data(){
return{
name:'',
// person:{
// id:nanoid(),
// pname:''
// }
}
},
methods:{
add(){
const person = {id:nanoid(),name:this.name}
this.$store.commit("Add",person)
this.name=""
}
// ...mapMutations({add:'Add'}),
},
computed:{
personList(){
return this.$store.state.personlist
}
// ...mapState({personList:'personlist'})
}
}
</script>
效果图