【vuex 】 安装及其基本使用

一,什么是vuex?

专门在 Vue 中实现集中式状态(数据)管理的一个 Vue 插件,对 vue 应 用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方 式,且适用于任意组件间通信

1,让我们从一个简单的 Vue 计数器应用程序来认识vuex:

const Counter = {
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    
{ { count }}
`, // actions methods: { increment () { this.count++ } } } createApp(Counter).mount('#app')

2,原理图

  • 状态,驱动我们应用程序的事实来源;
  • 视图状态的声明性映射;
  • 操作,状态在响应视图中的用户输入而更改的可能方式。

①,这是单向数据原理图,

【vuex 】 安装及其基本使用_第1张图片

 ②,当我们有多个共享共同状态的组件时,这种简单性很快就会崩溃:

  • 多个视图可能依赖于同一个状态。
  • 来自不同视图的操作可能需要改变同一状态。

【vuex 】 安装及其基本使用_第2张图片

 二,应用场景

多个组件应用与同一个状态,多个组件变更同一状态。

三,安装

npm i vuex@3 // 注释:@3是版本号,vue2用vuex@3版本,vue3用4版本

四,store 创建

你可能感兴趣的:(Vue,vue.js,前端,javascript,前端框架)