什么是Vuex?可以解决什么问题?
Vuex是Vue.js应用程序的状态管理模式+库。
Vuex是一个状态管理的插件,可以解决不同组件之间的数据共享和数据持久化。
Vuex有哪些属性?
- state:即Vuex中的基本数据
- getters:相当于state的计算属性
- mutation:提交更改数据的方法,必须是同步函数
- action:像一个装饰器,包裹mutations,使之可以异步
- modules:模块化Vuex
使用方法
在vue-cli已安装Vuex的情况下,直接引用。
如果没有安装的话:
- 安装Vuex,使用命令:cnpm install vuex --save 进行安装
- 在src下新建一个名为vuex的文件夹
- vuex文件夹里面新建一个store.js
- 在刚刚创建的store.js引入vue和vuex,并且使用use Vuex
- 定义数据
- 定义方法
- 实例化Vuex.store
- 暴露
完整代码如下
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
//state在vuex中用于储存数据 state=状态
var state = {
count: 1
}
// mutations里面放的是方法,方法主要用于改变state中的数据 mutations=改变
var mutations = {
incCount(){
++state.count;
}
}
//vuex 实例化 Vuex.store
const store = new Vuex.Store({ //store储存
state,
mutations:mutations
})
// 暴露
export default store;
在组件中引入Vuex
1、在组件中引入store.js
2、注册
3、获取state里面的数据
第一种:this.$store.state
第二种:
4、触发mutations改变state里面的数据
this.$store.commit(‘incCount’)
完整代码如下
<template>
<div class="hello">
<h1>{{ this.$store.state.count }}</h1>
</div>
</template>
<script>
import store from "../vuex/store.js" //引入store
export default {
data () {
return {
msg: store.state.count
}
},
store, //注册
methods:{
incCount(){
this.$store.commit('incCount'); /*触发 state里面的数据*/
}
}
}
</script>
Vuex dispatch和commit来调用mutations的区别
dispatch:含有异步操作,例如向后台提交数据。
写法:this.$store.dispatch('mutations方法名',值)
commit:同步操作
写法:this.$store.commit('mutations方法名',值)