官方文档
vuex 是什么
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.
为什么要使用vuex
vux 可以解决多个组件之间的通信问题
vuex 基本了解
- 容器(store): 用于存储状态的
- 状态(state): 多个组件需要共享的数据(就可以称之为状态)
- 突变(mutations): 由于单向数据流的关系,如果组件需要修改容器中的状态,就必须通过
mutations可以将这个mutation理解为一个状态管理员, 组件想要修改状态就必须告诉管理员, 由管理员来决定是否更改数据,需改数据的规则, 如下图所示
vuex
此处的状态可以简单的理解为 需要被多个组件共享的数据
getter
有时候我们需要根据store中的state的数据进行过滤加工,就需要使用 getter, 例如对数组进行过滤,然后产生一个新的数组展示到页面中, 比如脏话(字符串)过滤.... 我们可以将vux中的 getter 理解为 vue实例的计算属性
基本使用
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuex study</title>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/vuex/dist/vuex.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.current{
line-height: 100px;
text-align: center;
background: #000;
color: deepskyblue;
font-size: 30px;
}
.other{
background: #888888!important;
}
.btns {
text-align: center;
margin: 30px 0;
}
.btns button{
border: none;
120px;
line-height: 30px;
background: #000;
color: deepskyblue;
}
</style>
</head>
<body>
<div id="app">
<calc></calc>
<other-component></other-component>
</div>
<template id="calc">
<div>
<p class="current">现在的状态: {{$store.state.counter}} </p>
<p class="btns"> <button @click="inc">加</button> <button @click="dec">减</button> </p>
</div>
</template>
<template id="other">
<div>
<p class="current other">其他组件中的状态: {{$store.state.counter}} </p>
<p class="current other">在其他组件中使用getter属性: {{$store.getters.computeCounter}} </p>
</div>
</template>
<!-- javascript -->
<script>
let otherComponent = Vue.extend({
template: '#other',
});
let calc = Vue.extend({
template: '#calc',
methods: {
inc () {
// 当点击"加"的按钮式就触发这个函数,提交一个 increment 的 mutation
this.$store.commit('increment', 2);
},
dec () {
// 当点击"减"的按钮式就触发这个函数,提交一个 decrement 的 mutation
this.$store.commit('decrement', 3);
}
},
});
/**
* 因为容器只有一个所以 vuex 的实例也必须只有一个
* 所以,建议使用 const 关键字来定义
*/
const vuex = new Vuex.Store({
state: {
counter: 0,
},
// 开启严格模式,开启严格模式后,必须通过 mutation 来修改状态
strict: true,
mutations: {
// state 是默认传递的参数,可以直接使用,
increment(state, size){
state.counter += size;
if (state.counter >= 10) {
state.counter = 10;
}
},
decrement(state, size){
state.counter -= size;
if (state.counter <= 0){
state.counter = 0;
}
}
},
getters: {
computeCounter: state => {
return state.counter + Math.random();
},
}
});
// 把这个组件挂载到vue实例中之后
// 每个vue的实例就会有一个 $store 的属性
const vue = new Vue({
store: vuex,
components: {
calc,
'other-component' : otherComponent,
},
}).$mount('#app');
</script>
</body>
</html>