什么是Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
这个状态自管理应用包含以下几个部分：
- 状态，驱动应用的数据源；
- 视图，以声明方式将状态映射到视图；
- 操作，响应在视图上的用户输入导致的状态变化。
以下是一个表示“单向数据流”理念的简单示意：
但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：
- 多个视图依赖于同一状态。
- 来自不同视图的行为需要变更同一状态。
安装
npm install vuex@next --save
简单使用
首先创建一个store
在单独的store目录下创建index.js
store/index.js
import { createStore } from 'vuex'
// 创建store
const store = createStore({
// 定义state
state(){
return {
count:0
}
},
// 定义mutations
mutations:{
// 显示tabbar
increment(state){
state.count++
},
},
})
// 导出store
export default store在main.js中引入stroe
import { createApp } from 'vue'
import App from './app.vue'
import store from './store/index'
var app = createApp(App)
app.use(store)
app.mount('#app');在App.js中使用
<template>
count - {{ count }}
</template>
<script>
export default {
computed: {
count() {
return this.$store.state.count
}
}
}
</script>核心概念
- State
- Mutation
- Action
- Getter
- Module
