Vuex使用的详细步骤
1. Vuex是什么?
Vuex是官方提供的一个插件,状态管理库,集中式管理项目中组件共用的数据
2. 什么时候使用?
中大型单页面应用,组件间关系复杂,组件状态多,组件间通信困难,这个时候就可以考虑使用Vuex
3. 使用Vuex的好处
- 能够在vue中管理公共的数据,便于开发和维护
- 在整个项目中可以实现组件之间的数据共享
- 储存在Vuex中的数据都是响应式的,能够保持数据与页面上的数据保持同步
- 注意:Vuex的数据是存放在内存上面的,页面刷新Vuex的数据就会被清空,我们可以通过storage将状态存储在本地使用。
4. Vuex的五大核心概念
-
state:存放状态数据的地方,其中数据是响应式的,数据改变对应组件的数据也会跟新改变,禁止直接改变state中的数据否则数据无法被调试工具监测。
-
mutations:装着处理数据逻辑方法的集合体,是改变state中数据的唯一方法,修改数据是同步的。
-
actions:提交mutations修改数据,与mutations功能类似,但修改数据是异步的。
-
getter:可理解为store的计算属性,能读取state中的数据。
-
modules:当store过于臃肿时,可使用modules将store分割成模块,每个模块中都有自己的state、getter、mutations、actions
5. Vuex的使用方法
1、用Vue脚手架工具构建好项目;
2、利用npm包管理工具安装vuex;
3、新建一个store文件夹,并在文件夹下新建“index.js”文件;
4、在文件中引入vue和vuex。
1)Vuex的具体使用
- 利用npm包管理工具,进行安装 vuex。在控制命令行中输入下边的命令就可以了
npm install vuex --save
要注意的是这里加上 –save,因为这个包我们是在生产环境中是要使用的。
- 新建一个store文件夹(这个不是必须的),并在文件夹下新建index.js文件,文件中引入我们的vue和vuex并引用。
import Vue from "vue"
import Vuex from 'vuex'
Vue.use(Vuex)
const state ={
count: 1
}
const mutations ={
numAdd(state){
state.count++
}
}
const actions = {}
const getters = {}
// 利用Vuex.Store创建实例并暴露出去
export default new Vuex.Store({
state,
mutations,
actions,
getters,
//modules:{}
})
- 在main.js 中引入新建的vuex文件
import Vue from 'vue'
import App from './App.vue'
// 引入vuex文件
import store from "@/store"
new Vue({
render: h => h(App),
router,
//注册
store
}).$mount('#app')
通过这几步的操作,vuex就算引用成功了,接下来我们就可以尽情的玩耍了。
2) 组件中如何访问state中的数据?
- 组件访问state中数据的第一种方式
this.$store.state.全局数据名称
例如,在组件Home.vue中使用,注意:在组件中可以省略this关键字
<template>
<div>
<h1>这是home首页</h1>
<!-- vuex分模块的时候 没有分模块直接$store.state.count即可-->
<h1>{{$store.state.home.count}}</h1>
</div>
</template>
- 也可以通过mapState进行访问
<template>
<div>
<h1>这是home首页</h1>
<button>{{count}}</button>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name:'myHome',
computed: {
//数组的形式
...mapState(["count"]);
//还能写成对象的形式
...mapState({
count:(state)=>state.count
})
}
}
</script>
- 通过computed的计算属性直接赋值
computed:{
count(){
return this.$store.state.count;
}
}
这里需要注意的是return this.$store.state.count
这一句,一定要写this,要不你会找不到$store的。
3) 如何修改Vuex的状态(数据)?
1. Vuex提供了commit方法来修改状态
通过commit一个mutation来修改状态
- 组件代码,在button上的修改方法
<button @click="$store.commit('add')">+</button>
<button @click="$store.commit('reduce')">-</button>
- store.js文件
const mutations={
add(state){
state.count+=1;
},
reduce(state){
state.count-=1;
}
}
关于传值:这只是一个最简单的修改状态的操作,在实际项目中我们常常需要在修改状态时传值。比如上边的例子,是我们每次只加1,而现在我们要通过所传的值进行相加。其实我们只需要在Mutations里再加上一个参数,并在commit的时候传递就就可以了。我们来看具体代码:
- 现在store.js文件里给add方法加上一个参数n。
const mutations={
add(state,n){
state.count+=n;
},
reduce(state){
state.count-=1;
}
}
- 在组件里修改按钮的commit( )方法传递的参数,我们传递10,意思就是每次加10。
<button @click="$store.commit('add',10)">+</button>
<button @click="$store.commit('reduce')">-</button>
2. Vuex提供了dispatch方法来修改状态
通过dispatch一个action方法,通过action可以commit一个mutation来修改状态
在action中可以增加异步方法处理逻辑,例如:发送请求获取数据等。
- 组件中的代码:
mounted() {
// 派发action,获取floor组件的数据
this.$store.dispatch("getFloorList");
},
- store.js中的代码
const state = {
// floor 组件的数据
floorList:[]
};
const mutations= {
GETFLOORLIST(state,floorList) {
state.floorList = floorList
}
};
const actions = {
// 获取floor数据
async getFloorList( { commit } ){
let result = await reqFloorList()
if(result.code === 200) {
// 提交mutation
commit("GETFLOORLIST",result.data)
}
}
};
3. 高级用法----辅助函数修改状态
有那几个辅助函数(4大金刚)
mapState,mapActions,mapMutations,mapGetters
- 辅助函数可以把
vuex
中的数据和方法映射到vue组件
中。达到简化操作的目的
- mapGetters辅助函数如何使用?
- 组件代码:
<h3>{{cartList}}</h3>
import { mapGetters } from "vuex";
computed: {
...mapGetters(["cartList"])
}
- store.js文件代码:
const state = {
// 购物车列表数据
cartList: []
}
const getters = {
cartList(state) {
return state.cartList[0] || {}
},
}
- mapMutations辅助函数如何使用?
- 组件代码:
<button @click="add">+</button>
//从Vue中引入mapMutations 函数
import { mapMutations } from "vuex";
//将需要的mutations函数,映射为当前组件的methods方法
methods: {
...mapMutations(["add"])
}
- store.js文件代码:
state: {
count: 0
},
mutations: {
add(state){
state.count++
}
}