Vue/Vuex入门、Vuex安装 和 Vuex创建导入仓库、Vuex （state ）方法、state 辅助函数mapState 方法说明

一.Vuex使用和导入

一.安装第三方包

npm i vuex@3.4.0

二.创建导入使用

// 导入 vue
import Vue from 'vue' 

// 导入 vuex
import Vuex from 'vuex'

// vuex也是vue的插件, 需要use一下, 进行插件的安装初始化
Vue.use(Vuex)

// 创建仓库 store
const store = new Vuex.Store()

// 导出仓库
export default store

三.在main.js中导入挂载Vue实列上
1.导入

import store from './store'

2.挂载Vue实列

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

二. state

1.state

语法: 

// 定义state --> main.js

const store = new Vuex.Store({
  state: {
    count: 101
  }
})

// 标签内使用 --> App.vue

 <标签>{{ $store.state.count }} </标签>

// 计算属性内使用 --> App.vue
  computed: {
    自定义函数名( ) {
      return this.$store.state.count
    }
  }

作用: 保存公共数据(多组件中共用的数据)

注意: state是响应式的: 如果修改了数据相应的在视图上的值也会变化 

理解: state是单一状态树 里面集中存储所有的数据 就是vuex用来存储数据状态的地方 

用法说明: 将需要保存的数据添加在state里面 然后外界可以通过 $store.state.xxx 访问即可 

说明: 

1.state提供唯一的公共数据源 所有共享的数据 都要统一放到 Store 中的 State中存储

2.state属性是Vuex中用户存放组件之间共享的数据 把一些组件之间共享的状态主要存放在state属性中 他采用单一状态树 用一个对象就包含了全部的 应用层 级状态，每个应用将仅仅包含一个store实列 单一状态树让我们能够之间定位特点状态片段 

2.辅助函数mapState

语法：

// 导入

import { mapState } from 'vuex'

// 展开

 computed: {
    ...mapState(['state内属性名'])
  }

//使用

 <标签> {{ state内属性名}}</标签>

作用: mapState是state的语法糖 辅助函数帮助生成计算属性

注意: mapState是眏射state对象的数据 简化代码结构

介绍: 当一个组件需要获取多个状态的时候 将这些状态都声明为计算属性会有些重复的冗余 为了解决这个问题 可以使用 mapState辅助函数帮助生成计算属性 

说明:

1.mapState 是定义在计算属性内 需要展开运算符 ...

2.mapState 方法需要传入一个数组

3.mapState返回值是一个对象 对象中存储传入数据对象的一个函数

4.只需要调用 mapState 将其结果在 计算属性内展开就可以快速实现访问 state内数据