vuex学习笔记(基于vue3.0)

vuex学习笔记(基于vue3.0)

vuex官网

专门为vue设计的，vue项目实现频繁的、大范围数据共享的技术方案。

优点

1. 数据的存储一步到位，不需要层层传递；
2. 数据的流动非常清晰；
3. 存储在vuex中的数据都是响应式的（数据更新后使用数据的组件都会自动更新）；

安装与配置

1. 安装（node要用最新版）

npm i vuex

2. src目录下新建store文件夹，文件夹内新建index.js文件。

// 1.导入所需要的包
import { createStore } from 'vuex';

// 2.创建 store 实例对象
const store = createStore({
    /**这里配置vuex */
})

// 3.导出 store
export default store;

3.在main.js中注册

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

createApp(App).use(store).mount('#app')

4.可以使用了。

state 的使用

1. 存储数据

const store = createStore({
    /**这里配置vuex */
    state: {
        name: 'xiaoming',
        age: 18,        
    }
});

2. 组件中 $store.state.属性名 直接使用

<template>
  <div class="greetings">
    <h2 class="green">{{ $store.state.name }}</h2>
    <h2 class="green">{{ $store.state.age }}</h2>
  </div>
</template>

3. 通过 mapState 辅助方法使用数据，将 Vuex 中存储的数据映射为当前组件的计算属性
   这里是找到的一篇比较好的讲解文章就不贴自己的代码了