Vue学习笔记：Vuex part01-CFANZ编程社区

Vue学习笔记：Vuex part01

什么是Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

这个状态自管理应用包含以下几个部分：

状态，驱动应用的数据源；
视图，以声明方式将状态映射到视图；
操作，响应在视图上的用户输入导致的状态变化。

以下是一个表示“单向数据流”理念的简单示意：

Vue学习笔记：Vuex part01_Vuex

但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

多个视图依赖于同一状态。
来自不同视图的行为需要变更同一状态。

Vue学习笔记：Vuex part01_Vuex_02

安装

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>

0 条评论