vue3学习（Vuex手动创建）

Vue状态管理（Vuex创建）

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

简单来说，状态管理可以理解成为了更方便的管理组件之间的数据交互，提供了一个集中式的管理方案，任何组件都可以按照指定的方式进行读取和改变数据。

引入Vuex的步骤：

1.安装Vuex：npm install—save vuex

2.配置Vuex文件：在src文件夹下创建store文件夹，在该文件夹下创建index.js文件，在此文件中添加Vuex代码。

 

也可简写为（与官方文档同）

import {createStore} from 'vuex'
export default createStore({
    state:{
        counter:0
    }
})

3.在主文件中引入Vuex(在main.js添加)

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import store from './store' //加此排

createApp(App).use(store).mount('#app')//加。use(store)

4.在组件中读取状态 

方式一：在组件中输入  <p>{{$store.state.counter}}</p>即可在组件页面上显示counter的值。

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  computed:{ //加入以下三排
    ...mapState(["counter"])
  }
}

方式二：在组件中要多使用数据时，可以采用该方式进行读取;

首先在组件中导入  import { mapState } from 'vuex';

然后在export default中加入

最后可直接使用{{counter}}。

上述步骤均可通过在创建vue项目时勾选Vuex选项代替。