Vuex的基础使用

Vuex简介

Vuex是一个Vue的状态管理工具，状态就是数据。作为一个插件，可以帮忙管理Vue通用的数据（多组件共享的数据 ），使其维护数据更加方便简介，将重要数据进行集中化管理。

使用场景：

1.某些数据在多个组件中使用(例：个人信息)

2.多个组件共同维护同一份数据（例：购物车）

使用步骤

1.安装

项目中打开终端安装Vuex@3

yarn add vuex@3

2.创建

在components同级文件夹中创建store文件夹，并在其中创建js文件用于定义vuex

import Vue from 'vue'
import Vuex from 'vuex'

//将vuex进行使用安装
Vue.use(Vuex)

//创建一个新的空仓库Store
const store = new Vuex.Store()

//导出store
export default store

3.挂载

挂载到main.js文件中

//导入store
import store from '@/store/index'

导入挂载成功后便成功创建一个新仓库，所有的组件都可以访问到的通用对象

4.为仓库提供数据

在Vuex的仓库中State提供了唯一的公共数据源，所有的共享数据都需要放到store中的state进行储存。因此我们可以将我们需要共享的数据放入state对象中。

在store文件夹中的js代码中添加：

const store = new Vuex.Store({
  // 在仓库中state对象中创造数据
  state: {
    title: '仓库名字',
    count: 1,
    list: [1, 2, 3, 4, 5, 6]
  }

5.数据使用

使用数据的方式有两种，第一种是通过store直接访问使用，第二种是通过辅助函数进行访问。

直接访问使用：

//模块中使用
{{$store.state.数据名}}
//组件逻辑中使用
this.$store.state.数据名
//JS模块中使用
store.state.数据名

辅助函数使用：

通过使用mapState辅助函数，帮助我们将store中的数据自动映射到组件的计算属性中

使用方式：

1.在vue组件中导入mapState函数

<script>
import { mapState } from 'vuex'
</script>

2.数组方式引入state

当引入函数后，函数并自动得到一个mapState对象，自动将数据映射到其的计算属性中，需要我们将其配置到computed中，并通过展开运算符进行展开。

computed: {
    // mapState 是映射属性
    ...mapState(['count', 'user', 'list'])
}

此时就可以直接在该组件中使用我们仓库中的数据了。