一、关于vuex
概念:专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件进行集中式的管理(读/写),也是组件通信的一种方式,且适用于任意组件的通信。vuex当成一个store仓库,可以集中管理共享的数据,并且存储在vuex中的数据都是响应式的,数据与页面同步。
二、什么时候使用Vuex
1.只有组件之间共享的数据,才有必要存储到vuex中;对于组件中的私有数据,依旧存储在组件自身的data中。
2.多个组件依赖于同一个改变的数
一、如何使用Vuex
vue2推荐安装vuex3,应vue2与vuex最新版不兼容,推荐降低vuex3版本
npm i vuex@3
vue3安装
npm install vuex --save
在src创建store目录,创建index.js文件
在store下的index.js添加
import Vuex from "vuex"
import Vue from 'vue'
Vue.use(Vuex)
//用于响应组件的动作
const actions = {
}
//用于操作数据
const mutations = {
}
//用于存储数据
const state = {
}
const getters = { //当state中的数据需要进行加工后在使用,可以使用getters加工
}
//创建store
export default new Vuex.Store({
actions,
mutations,
state,
getters
})
//暴露store
在main.js进行引入
import store from './store/index.js'
挂载store
import Vue from 'vue'
import App from './App.vue'
import store from './store/index.js'
Vue.config.productionTip = false
//入口文件
new Vue({
render: h => h(App),
store,
}).$mount('#app')
二、如何在组件中使用
可以直接在页面中使用 $store.state.命名数据
<template>
<div>
<h3>其后1{{sum}}</h3>
<input type="text" placeholder="请输入" v-model="TAKE" />
<button @click="add()">添加</button>
<ul>
<li v-for="(item,index) in $store.state.personList" :key="item.id">{{item.name}}</li>
</ul>
</div>
</template>
<script>
import {
mapState
} from 'vuex'
import {
nanoid
} from 'nanoid';
export default {
name: 'Person',
data() {
return {
TAKE: ''
}
},
computed: {
...mapState({sun:'sum'})
},
methods: {
add() {
const personlist = {
id: nanoid(),
name: this.TAKE
}
this.$store.commit('ADD', personlist)
}
},
}
</script>
<style>
</style>
三、使用官方api
<script>
import {
mapState,
mapGetters,
mapMutations,
mapActions
} from 'vuex' //用于帮助我们映射state中的数据为计算属性//用于帮助我们映射state中的数据为计算属性
export default {
data() {
return {
num: 1
}
},
computed: { //存储数据
// ...mapState({
// sum: 'sum',
// name: 'name',
// address: 'address'
// }),
...mapState(['sum', 'name', 'address', 'personList']),
...mapGetters({
bigSum: 'bigSum'
})
},
methods: {//存储方法
// add() {
// console.log(this)
// this.$store.commit('JIA', this.num) //直接使用vuex的方法,括号第一个是vuex方法,第二个是传递参数
// },
// subtract() {
// this.$store.commit('JIAN', this.num)
// },
...mapMutations({
add: 'JIA', //第一个本地组件方法命名,第二个vuex的命名,将vuex的方法重新命名
subtract: 'JIAN'
}),
//...mapMutations([JIA,JIAN]) //将vuex的方法命名为vuex中的方法名
...mapActions({
qishu: 'qishu',
time: 'time'
}),
},
}
</script>
vuex的方法
import Vuex from "vuex"
import Vue from 'vue'
Vue.use(Vuex)
//用于响应组件的动作
const actions = {
jia(commtext, value) {
commtext.commit('JIA', value)
},
jian(commtext, value) {
commtext.commit('JIAN', value)
},
qishu(commtext, value) {
if (commtext.state.sum % 2 == 0) {
commtext.commit('JIA', value)
}
},
time(commtext, value) {
setTimeout(() => {
commtext.commit('JIA', value)
}, 2000)
}
}
//用于操作数据
const mutations = {
JIA(state, value) {
state.sum += value
},
JIAN(state, value) {
state.sum -= value
},
ADD(state, value){
state.personList.push(value)
}
}
//用于存储数据
const state = {
sum: 0,
name: '孙悟空',
address: '花果园',
personList: [{
id: '001',
name: '张三'
}]
}
const getters = { //当state中的数据需要进行加工后在使用,可以使用getters加工
bigSum(state) {
return state.sum * 10
}
}
//创建store
export default new Vuex.Store({
actions,
mutations,
state,
getters
})
//暴露store
四、关于多个模块数据和方法的vuex使用
import Vuex from "vuex"
import Vue from 'vue'
Vue.use(Vuex)
//用于响应组件的动作
const personSum = {
namespaced: true,
actions: {
jia(commtext, value) {
commtext.commit('JIA', value)
},
jian(commtext, value) {
commtext.commit('JIAN', value)
},
qishu(commtext, value) {
if (commtext.state.sum % 2 == 0) {
commtext.commit('JIA', value)
}
},
time(commtext, value) {
setTimeout(() => {
commtext.commit('JIA', value)
}, 2000)
}
},
//用于操作数据
mutations: {
JIA(state, value) {
state.sum += value
},
JIAN(state, value) {
state.sum -= value
},
},
//用于存储数据
state: {
sum: 0,
name: '孙悟空',
address: '花果园',
},
getters: { //当state中的数据需要进行加工后在使用,可以使用getters加工
bigSum(state) {
return state.sum * 10
}
},
}
//求和的相关配置
const perso = {
namespaced: true,
actions: {},
//用于操作数据
mutations: {
ADD(state, value) {
state.personList.push(value)
}
},
//用于存储数据
state: {
personList: [{
id: '001',
name: '张三'
}]
},
getters: { //当state中的数据需要进行加工后在使用,可以使用getters加工
},
}
//人数相关配置
export default new Vuex.Store({
modules: {
personSum,
perso
}
})
//暴露store
组件内使用
<template>
<div>
<h1>当前求和为:{{sum}}</h1>
<h3>当前求和放大10倍{{bigSum}}</h3>
<h3>我叫{{name}},家中{{address}}</h3>
<h3>下方组件的总人数{{personList.length}}</h3>
<select v-model="num">
<option v-for="(item,index) in 6" :key="index" :value="item">{{item}}</option>
</select>
<button @click="add(num)">+</button>
<button @click="subtract(num)">-</button>
<button @click="qishu(num)">当前求和为奇树在加</button>
<button @click="time(num)">等一等在加</button>
</div>
</template>
<script>
import {
mapState,
mapGetters,
mapMutations,
mapActions
} from 'vuex' //用于帮助我们映射state中的数据为计算属性//用于帮助我们映射state中的数据为计算属性
export default {
data() {
return {
num: 1
}
},
computed: {
...mapState('personSum', ['sum', 'name', 'address']),
...mapState('perso', ['personList']),
...mapGetters('personSum',{
bigSum: 'bigSum'
})
},
methods: {
...mapActions('personSum',{
qishu: 'qishu',
time: 'time'
}),
},
}
</script>
<style>
</style>
直接使用方法:this.$store.commit('命名模块/vuex的方法名', 参数)
五、关于vuex的actions,mutations,state, getters
actions:action 用于处理异步任务。如果通过异步操作变更数据,必须通过 action,而不能使用 mutation,但是在 action 中还是要通过触发Mutation 的方式间接变更数据。
mutations:在vuex中不允许组件直接去修改全局域中的数据,必须通过mutation来变更store中的数据。 通过这种方式虽然操作起来稍微繁琐一些,但是可以集中监控所有数据的变化(可以监控是谁更改了state)。
state:state 提供唯一的公共数据源,所有共享的数据都要统一放到 store 的 state 中进行存储。
getters:getter用于对store中的数据进行加工处理并形成新的数据,类似于Vue中的计算属性,store中的数据发生变化,getter中的数据也发生变化,存在一个响应关系。