【vuex 】 安装及其基本使用

一，什么是vuex？

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

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

const Counter = {
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{
  { count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
}

createApp(Counter).mount('#app')

2，原理图

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

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

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

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

 二，应用场景

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

三，安装

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

四，store 创建