一、Vuex简介
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
二、使用
1.安装依赖
- 情景1:在使用vueCli创建项目时勾选Vuex这个选项,项目会自动引入Vuex
- 情景2:在使用vue-cli创建项目时未勾选Vuex,此时需要安装Vuex,安装步骤如下:
首先,进入到创建项目的根目录下 使用 `npm install --save vuex`命令进行安装;如果网速较慢可使用cnpm install --save vuex
安装完成后项目目录如下:
|__ node_modules
|__ public
|__ src
|_ assest
|_ components
|_Hello.vue
|_ store
|_index.js
|_ view
|_HomeView.vue
|_AboutView.vue
2.使用
store中index.js中:
import { createStore } from 'vuex'
export default createStore({
state: {
count:10,
},
})
main.js文件Vuex挂载到vue实例中
import Vue from 'vue'
import App from './App'
import store from './store'
Vue.config.productionTip = false
new Vue({
el: '#app',
store, //创建的Vuex实例挂载到这个vue实例中
render: h => h(App)
})
3.store 在组件中使用
在store文件夹下index.js中定义一个count
state:{
count:10;
}
在组件中读取count
- 方法一:直接读取显示在页面
<template>
<div>
<p>{{ this.$store.state.count }}</p>
</div>
</template>
- 方法二:使用computed 计算属性读取
<template>
<div>
<p>{{ getCount }}</p>
</div>
</template>
<script>
export default{
computed:{
getCount(){
return this.$store.state.count
}
}
}
</script>
- 方法三: 使用mapState辅助函数
<template>
<div>
<p>{{ getCount }}</p>
</div>
</template>
<script>
import { mapState } from "vuex" //引入mapState
export default{
computed:{
...mapState(['count']),
getCount(){
return this.count
}
}
}
</script>
4.Mutation
官网定义:更改Vuex的store中的状态的唯一方法是提交mutation
通俗的理解:mutation是用来改变store中状态值
使用如下:
- 情景一 :不携带参数
在store文件夹下的index.js中定义mutation (以改变上面count的值为例)
mutations: {
addCount(state){ //对count执行加1的操作
state.count += 1;
},
delCount(state){
state.count -= 1; //对count执行减1的操作
}
}
在组件中使用mutation
<template>
<div>
<p>{{ getCount }}</p>
<button @click="addHander">增加</button>
<button @click="delHander">减少</button>
</div>
</template>
<script>
export default{
computed:{
getCount(){
return this.$store.state.count
}
},
methods:{
addHander(){
this.$store.commit("addCount")
},
delHander(){
this.$store.commit("delCount")
}
}
}
</script>
- 情景二 携带参数
增加一个输入框,将用户输入的值作为count增加减少的对象
在store文件夹下的index.js中定义mutation (以改变上面count的值为例)
mutations: {
addCount(state,num){ //对count执行加1的操作
state.count += num;
},
delCount(state, num){
state.count -= num; //对count执行减1的操作
}
}
在组件中使用
<template>
<div>
<p>{{ getCount }}</p>
<input type="text" v-model="num">
<button @click="addHander">增加</button>
<button @click="delHander">减少</button>
</div>
</template>
<script>
export default{
data(){
return{
num:""
}
},
computed:{
getCount(){
return this.$store.state.count
}
},
methods:{
addHander(){
this.$store.commit("addCount",parseInt(this.num))
},
delHander(){
this.$store.commit("delCount",Number(this.num))
}
}
}
</script>
- 情景三:携带对象类型参数
在store文件夹下的index.js中定义mutation (以改变上面count的值为例)
mutations: {
addCount(state,obj){ //对count执行加1的操作
state.count += obj.num;
},
delCount(state, obj){
state.count -= obj.num; //对count执行减1的操作
}
}
在组件中使用
<template>
<div>
<p>{{ getCount }}</p>
<input type="text" v-model="num">
<button @click="addHander">增加</button>
<button @click="delHander">减少</button>
</div>
</template>
<script>
export default{
data(){
return{
num:""
}
},
computed:{
getCount(){
return this.$store.state.count
}
},
methods:{
addHander(){
this.$store.commit("addCount",{
num: parseInt(this.num)
})
},
delHander(){
this.$store.commit("delCount",{
num:Number(this.num)
})
}
}
}
</script>
- 情景4 使用mapMutations辅助函数
首先,在组件中引入mapMutations函数
<template>
<div>
<p>{{ getCount }}</p>
<input type="text" v-model="num">
<button @click="addHander">增加</button>
<button @click="delHander">减少</button>
</div>
</template>
<script>
import { mapState, mapMutations } from "vuex" //引入mapState
export default{
data(){
return{
num:""
}
},
computed:{
...mapState(['count']),
getCount(){
return this.count
}
},
methods:{
...mapMutations(["addCount","delCount"]),
addHander(){
this.addCount({
num: parseInt(this.num)
})
},
delCount(){
this.delCount({
num: Number(this.num)
})
}
}
}
</script>
5.Action
Action类似于Mutation但不同点在于:Action可以处理异步操作
state:{
count:10,
navInfo:[]
}
action:{
asyncUpdate(context){
axios.get("网络请求接口").then(res=>{
if(res.status === 200){
context.commit("navInfo",res.data.banner)
}else{
context.commit("navInfo",[])
}
}).catch(err=>{
console.log(err)
})
}
}
在组件中使用
- 情景一:直接使用
<template>
<div>
<ul>
<li v-for="(item,index) in banner" :key="index">
<p>{{item.title}}</p>
</li>
</ul>
<button @click="getInfo">获取数据</button>
</div>
</template>
<script>
export default{
medthod:{
getInfo(){
this.$store.dispatch("asyncUpdate")
}
}
}
</script>
- 情景2:使用mapActions辅助函数
<template>
<div>
<ul>
<li v-for="(item,index) in banner" :key="index">
<p>{{item.title}}</p>
</li>
</ul>
<button @click="getInfo">获取数据</button>
</div>
</template>
<script>
import { mapActions } from "vuex"
export default{
medthod:{
...mapActions(['asyncUpdate'])
getInfo(){
this.asyncUpdate()
}
}
}
</script>