Vuex 是什么?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化
Vuex 图解
Vuex 配置步骤
- 安装vuex
cnpm i vuex -S
- 导入 vuex
import Vuex from 'vuex'
- 将vuex 挂载到 vue中
Vue.use(Vuex)
- new Vuex.Store() 实例,得到一个数据仓储对象
- 将 vuex 创建的 store 挂载到 vm 实例上,只要挂载vm上,任何组件都能使用 store 来存取数据
var store = new Vuex.Store({
state:{
// 大家可以把这个 state 想象成组件中的 data,专门用来存储数据的
// 如果在 组件中 ,想要访问 store 中的数据,只能通过 this.$store.state.*** 来访问
count:0
},
mutations:{
// 注意:如果要操作 store 中的 state 值,只能通过 调用 mutations 提供的方法,才能操作
// 对应的数据,不推荐直接操作 state 中的数据,因为 玩意导致了数据的紊乱,不能快速定位到错误的原
// 因,因为,每个组件都可能有操作数据的方法;
increment(state){
// 传参第一个参数,是固定不变的,就像过滤器一样,
state.count++
},
subtract(state,obj){
// 在mutations 函数列表最多只能传 2 个参数
state.count -= obj.c+obj.d
}
// 注意:如果子组件想要调用我们的 mutations 中的方法,只能使用 this.$store.commit('方法名')
// 这种 调用 mutations 方法的格式,和 this.$emit('父组件中的方法名')
},
getters:{
// 这里的getters,只负责 对外提供数据,不负责 修改数据,如果想要修改 state 中的数据,就去找 mutations
optCount:function(state){
return '当前最新的count值是:' + state.count
}
// 经过回顾对比,getters 中的方法,和组件中的过滤器比较类似,因为 过滤器和getters 都没有修改原数据,都是把原数据做了一层包装,提供给了调用者;
// 其次:getters 也和 computed 比较像,只要 state 中的数据发生变化,那么,如果 getters 正好 也引用了这个数据,那么 就会立即触发 getters 的重新求值;
}
})
简单的例子
main.js文件:
import Vue from 'vue'
// 这是导入app组件
import app from './App.vue'
// 配置 vuex 步骤
// 1.导入vuex
import Vuex from 'vuex'
// 2.将vuex 挂载到 vue 中
Vue.use(Vuex);
// 3.创建store 实例
var store = new Vuex.Store({
state: {
// 大家可以把这个 state 想象成组件中的 data,专门用来存储数据的
// 如果在 组件中 ,想要访问 store 中的数据,只能通过 this.$store.state.*** 来访问
count: 0
},
mutations: {
// 注意:如果要操作 store 中的 state 值,只能通过 调用 mutations 提供的方法,才能操作
// 对应的数据,不推荐直接操作 state 中的数据,因为 玩意导致了数据的紊乱,不能快速定位到错误的原
// 因,因为,每个组件都可能有操作数据的方法;
increment(state) {
// 传参第一个参数,是固定不变的,就像过滤器一样,
state.count++
},
subtract(state, obj) {
// 在mutations 函数列表最多只能传 2 个参数
state.count -= obj.c + obj.d
}
// 注意:如果子组件想要调用我们的 mutations 中的方法,只能使用 this.$store.commit('方法名')
// 这种 调用 mutations 方法的格式,和 this.$emit('父组件中的方法名')
},
getters: {
// 这里的getters,只负责 对外提供数据,不负责 修改数据,如果想要修改
// state 中的数据,请 去找 mutations
optCount: function (state) {
return '当前最新的count值是:' + state.count
}
// 经过回顾对比,getters 中的方法,和组件中的过滤器比较类似,因为 过滤器和getters
// 都没有修改原数据,都是把原数据做了一层包装,提供给了调用者;
// 其次:getters 也和 computed 比较像,只要 state 中的数据发生变化,那么,如果 getters
// 正好 也引用了这个数据,那么 就会立即触发 getters 的重新求值;
}
})
var vm = new Vue({
el: '#app',
render: function (c) {
return c(app); //render 会把 el 指定的容器中,所有的内容都清空覆盖,所以不要把
// 路由的 router-view 和 router-link 直接写到 el 所控制的元素中
},
// 4.配置vuex第五步,将 vuex 创建的 store 挂载到 vm 实例上,只要挂载vm上,任何组件都能使用 store 来存取数据
store: store
})
App.vue文件:
<template>
<div>
<amount></amount>
<hr>
<counter></counter>
</div>
</template>
<script>
// 导入counter、amount组件
import counter from "./components/amount.vue";
import amount from "./components/counter.vue";
export default {
data() {
return {};
},
components: {
counter: counter,
amount: amount
}
};
</script>
<style>
</style>
counter.vue文件:
<template>
<div>
<input type="button" value="减少" @click="remove">
<input type="button" value="增加" @click="add">
<br>
<input type="text" v-model="$store.state.count">
</div>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
add() {
// 千万不要这么用,不符合 vuex 的设计理念
// this.$store.state.count++;
this.$store.commit("increment");
},
remove() {
// 注意:在 mutations 的函数参数列表中,最多支持两个参数,其中 ,参数1:是 state 状态;
// 参数2:通过 commit 提交过来的参数
// 如果想传多个参数,可以传对象或者数组
this.$store.commit("subtract", { c: 2, d: 1 });
}
},
computed: {
fullname: {
get() {},
set() {}
}
}
};
</script>
<style lang="scss" scoped>
</style>
amount.vue文件:
<template>
<div>
<!-- <h3>当前数量为:{{$store.state.count}}</h3> -->
<h3>{{$store.getters.optCount}}</h3>
</div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
</style>
总结
- state 中的数据,不能直接修改,如果想要修改,必须通过 mutations
- 如果组件想要直接,从 state 上获取数据:需要 this.$store.state.***
- 如果 组件,想要 修改数据,必须使用 mutation 提供的方法,需要通过 this.$store.commit(‘方法名称’,一个参数)
- 如果 store 中 state 上的数据,在对外提供的时候,需要做一层包装,那么,推荐使用 getters,如果需要使用 getters,则用 this.$store.getters.***