Vuex简介及数据管理

Vuex

1.Vuex简介

• Vuex就是一个vue的状态管理工具（状态就是数据）。其实vuex就是一个插件，帮忙管理Vue通用的数据而已。
• 日常生活中的购物车数据、个人信息等。在Vue中特点为：多个组件使用，多个组件共同维护这份数据。
• vuex优势：
  • 共同维护一份数据，数据集中化管理
  • 响应式变化
  • 操作简洁 (vuex提供了一些辅助函数)

2.Vuex的使用

2.1 安装Vuex

Vuex是一个独立存在的插件，如果脚手架初始化没有选 vuex，就需要额外安装。

yarn add vuex@3 或者 npm i vuex@3

2.2 新建Vuex模块文件

为了维护项目目录的整洁，在src目录下新建一个store目录其下放置一个index.js文件。

2.3 创建仓库

创建仓库store/index.js

// 导入 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

2.4 main.js导入挂载

main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

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

2.5 测试打印Vuex

App.vue

created(){
  console.log(this.$store)
}

打印结果：

3.Vuex管理数据

四个核心概念：state（存数据）、getters（计算属性）、mutations（更新state数据的唯一途径）、actions（放异步方法）

3.1 state状态

3.1.1 提供数据

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

• 使用：打开项目中的store.js文件，在state对象中可以添加我们要共享的数据。

// 创建仓库 store
const store = new Vuex.Store({
 // state 状态, 即数据, 类似于vue组件中的data,
 // 区别：
 // 1.data 是组件自己的数据, 
 // 2.state 中的数据整个vue项目的组件都能访问到
 state: {
   count: 101
 }
}

3.1.2 两种访问数据的方法

• 如何在组件中获取数据count
  • $store直接访问 —> {{ $store.state.count }}
  • 通过辅助函数mapState 映射计算属性 —> {{ count }}

（1）$store直接访问数据

获取 store：
 1.Vue模板中获取 this.$store
 2.js文件中获取 import 导入 store

模板中：{{$store.state.xxx}}
组件逻辑中：this.$store.state.xxx
js模块中：store.state.xxx

模板中使用：组件中可以使用 $store 获取到vuex中的store对象实例，可通过state属性属性获取count， 如下’

    <h1>state的数据 - {{ $store.state.count }}</h1>

组件逻辑中使用：将state属性定义在计算属性中

<h1>state的数据 - {{ count }}</h1>

// 把state中数据，定义在组件内的计算属性中
  computed: {
    count () {
      return this.$store.state.count
    }
  }

js文件中使用：

//main.js

import store from "@/store"

console.log(store.state.count)

（2）通过辅助函数-mapState获取 state中的数据

上面通过$state获取实在是有些麻烦，每次都要写一长串，那么可以联系到之前的计算属性，将其定义在计算属性中，但面对很多数据，都要手动去添加计算属性，也很麻烦，因此，有一个辅助函数：mapState，帮助我们把store中的数据映射到 组件的计算属性中, 它属于一种方便的用法

• 使用步骤：

  • 1.导入mapState函数

    import { mapState } from 'vuex'
    

  • 2.采用数组形式引入state

  mapState(['count']) 
  等价于
  count () {
      return this.$store.state.count
  }
  

  • 3.利用展开运算符将导出的状态映射给计算属性

    computed: {
     ...mapState(['count'])
   }
  

• 4.使用

   <div> state的数据：{{ count }}</div>
  

3.2 mutations修改数据

3.2.1 单向数据流

vuex 同样遵循单向数据流，组件中不能直接修改仓库的数据。

因此：this.$store.state.count++是错误的，但是并不会报错，此不规范可以通过设置strict:true开启严格模式。

// 创建仓库
const store = new Vuex.Store({
  strict: true,
  state: {
    count: 101
  }
})
// 导出仓库 给main.js使用
export default store

3.2.2 mutations操作流程

mutations是一个对象，对象中存放修改state的方法

• 使用步骤：
  • 定义mutations
  • 在对象中添加修改state数据的方法
  • 组件中提交mutations
    index.js

const store  = new Vuex.Store({
  state: {
    count: 0
  },
  // 1.定义mutations
  mutations: {
  //2.在对象中添加修改state数据的方法
     // 方法里参数 第一个参数是当前store的state属性
    // payload 载荷 运输参数 调用mutaiions的时候 可以传递参数 传递载荷
    addCount (state) {
      state.count += 1
    }
  }
})

App.vue （在组件中使用）

this.$store.commit('addCount')

3.2.3 带参数的mutations

• 提供mutations带参数函数

mutations: {
 addCount (state, count) {
   state.count = count
 }
},  

• 提交mutations

handle ( ) {
  this.$store.commit('addCount', 10)
}

注：提交的参数只能是一个, 如果有多个参数要传, 可以传递一个对象

3.2.4 Vuex中的值和input双向数据绑定

已知双向数据绑定v-model拆分为 :value和@input

<input :value="count" @input="handleInput" type="text">

export default {
  methods: {
    handleInput (e) {
      // 1. 获取输入框的值
      const num = e.target.value
      // 2. 提交mutation，调用mutation函数
      this.$store.commit('changeCount', num)
    }
  }
}

store/index.js

mutations: { 
   changeCount (state, newCount) {
      state.count = newCount
   }
},

3.2.5 通过辅助函数mapMutations修改数据

mapMutations和mapState很像，它把位于mutations中的方法提取了出来，我们可以将它导入

import  { mapMutations } from 'vuex'
methods: {
    ...mapMutations(['addCount'])
}
//上面代码的含义是将mutations的方法导入了methods中，等价于
methods: {
      // commit(方法名, 载荷参数)
      addCount () {
          this.$store.commit('addCount')
      }
 }

此时，就可以直接通过this.addCount调用了

<button @click="addCount">值+1</button>

但是请注意： Vuex中mutations中要求不能写异步代码，如果有异步的ajax请求，应该放置在actions中

3.3 actions处理异步操作

state是存放数据的，mutations是同步更新数据 (便于监测数据的变化, 更新视图等, 方便于调试工具查看变化)，actions则负责进行异步操作。mutations必须是同步的。

3.3.1 处理异步操作

• 使用：（有一个需求：1s之后，给一个数，然后去修改state）

  • 定义actions
  • 组件通过dispatch调用

store/index.js

//1.定义actions
mutations: {
  changeCount (state, newCount) {
    state.count = newCount
  }
}
actions: {

    //形参context 上下文
  setAsyncCount (context, num) {
    // 一秒后, 给一个数, 去修改 num
    setTimeout(() => {
      context.commit('changeCount', num)
    }, 1000)
  }
},

在组件中

//2.dispatch调用
setAsyncCount () {
  this.$store.dispatch('setAsyncCount', 666)
}

3.3.2 通过辅助函数mapActions处理异步

mapActions 是把位于 actions中的方法提取了出来，映射到组件methods中

• 使用
  • 在组件中导入辅助函数

      import { mapActions } from 'vuex'
      methods: {
         ...mapActions(['changeCountAction'])
      }
      
      //mapActions映射的代码 本质上是以下代码的写法
      //methods: {
      //  changeCountAction (n) {
      //    this.$store.dispatch('changeCountAction', n)
      //  },
      //}

使用‘：

<button @click="changeCountAction(200)">+异步</button>

3.4 getters

除了state之外，有时我们还需要从state中筛选出符合条件的一些数据，这些数据是依赖state的，此时会用到getters

例如，state中定义了list，为1-10的数组

state: {
    list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}

组件中，需要显示所有大于5的数据，正常的方式，是需要list在组件中进行再一步的处理，但是getters可以帮助我们实现它

3.4.1 实现getters

• 使用步骤
  • 定义getters
  • .组件使用getters

  //1.定义getters
  getters: {
     // getters函数的第一个参数是 state
    // 必须要有返回值
    filterList (state) {
      return state.list.filter(item => item > 5)
    }
     //上面的函数可以简写为：filterList:  state =>  state.list.filter(item => item > 5)
  }

//2.组件中使用
<div>{{ $store.getters.filterList }}</div>

3.4.2 通过辅助函数mapGetters处理

computed: {
    ...mapGetters(['filterList'])
}
//使用：
 <div>{{ filterList }}</div>

mapState和mapGetters都是映射属性

4.Vuex进阶

4.1 module模块

4.1.1 需求

• 问题：由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

如果把所有的状态都放在state中，当项目变得越来越大的时候，Vuex会变得越来越难以维护

• 解决：vuex进行模块化

4.1.2 模块拆分

• 概念：之前将所有的数据（state、mutations、actions、getters）都放在store/index.js下，现在根据不同的功能模块，拆分数据模块，在store下新建modules文件夹，在里面新建不同的js文件模块，每个模块下都有自己的四大核心概念。
• 示例：
  （1）定义两个模块 user 和 setting，user中管理用户的信息状态 userInfo ，setting中管理项目应用的 主题色 theme，描述 desc
  modules/user.js

const state = {
 userInfo: {
   name: 'zs',
   age: 18
 }
}

const mutations = {}

const actions = {}

const getters = {}

//导出四大核心概念
export default {
 state,
 mutations,
 actions,
 getters
}

modules/setting.js

const state = {
  theme: 'dark'，
  desc: '描述真呀真不错'
}

const mutations = {}

const actions = {}

const getters = {}

export default {
  state,
  mutations,
  actions,
  getters
}

import user from './modules/user'
import setting from './modules/setting'

const store = new Vuex.Store({
    modules:{
        user,
        setting
    }
})
export default store

（2）使用：在store/index.js文件中的modules配置项中，注册这两个模块

import user from './modules/user'
import setting from './modules/setting'

const store = new Vuex.Store({
    modules:{
        user,
        setting
    }
})
export default store

使用模块中的数据, 可以直接通过模块名访问 $store.state.模块名.xxx => $store.state.setting.desc也可以通过 mapState 映射

4.1.3 获取模块内的state数据

尽管已经分模块了，但其实子模块的状态，还是会挂到根级别的 state 中，属性名就是模块名
（1）通过模块名访问$store.state.模块名.xxx

$store.state.user.userInfo.name

（2）通过mapState映射

• 默认根级别的映射 mapState([ ‘xxx’ ])
• 子模块的映射 ：mapState(‘模块名’, [‘xxx’]) - 需要在子模块的导出开启命名空间 namespaced:true

...mapState('user', ['userInfo']),
...mapState('setting', ['theme', 'desc']),

const state = {
  userInfo: {
    name: 'zs',
    age: 18
  },
  myMsg: '我的数据'
}

const mutations = {
  updateMsg (state, msg) {
    state.myMsg = msg
  }
}

const actions = {}

const getters = {}

export default {
  namespaced: true,  //开启命名空间
  state,
  mutations,
  actions,
  getters
}

4.1.4 获取模块内的getters

使用模块中 getters 中的数据：

• 直接通过模块名访问$store.getters['模块名/xxx ']
• 通过 mapGetters 映射
  1. 默认根级别的映射 mapGetters([ ‘xxx’ ])
  2. 子模块的映射 mapGetters(‘模块名’, [‘xxx’]) - 需要开启命名空间

示例：
modules/user.js

const getters = {
  // 分模块后，state指代子模块的state
  UpperCaseName (state) {
    return state.userInfo.name.toUpperCase()
  }
}

访问getters

<!-- 测试访问模块中的getters - 原生 -->
<div>{{ $store.getters['user/UpperCaseName'] }}</div>

//子模块也需要开启命名空间
computed:{
//mapGetters 映射
  ...mapGetters('user', ['UpperCaseName'])
}

4.1.5 获取模块内的mutations

默认模块中的 mutation 和 actions 会被挂载到全局，需要开启命名空间，才会挂载到子模块。

获取模块内的mutations:

• 直接通过 store 调用 $store.commit('模块名/xxx ', 额外参数)
• 通过 mapMutations 映射
  1. 默认根级别的映射 mapMutations([ ‘xxx’ ])
  2. 子模块的映射 mapMutations(‘模块名’, [‘xxx’]) - 需要开启命名空间
     示例：
     modules/usrer.js

const mutations = {
  setUser (state, newUserInfo) {
    state.userInfo = newUserInfo
  }
}

modules/setting.js

const mutations = {
  setTheme (state, newTheme) {
    state.theme = newTheme
  }
}

直接通过 store 调用 $store.commit('模块名/xxx ', 额外参数)

<button @click="updateUser">更新个人信息</button> 
<button @click="updateTheme">更新主题色</button>


export default {
  methods: {
    updateUser () {
      // $store.commit('模块名/mutation名', 额外传参)
      this.$store.commit('user/setUser', {
        name: 'xiaowang',
        age: 25
      })
    }, 
    updateTheme () {
      this.$store.commit('setting/setTheme', 'pink')
    }
  }
}

辅助函数mapMutations：

<button @click="setUser({ name: 'xiaoli', age: 80 })">更新个人信息</button>
<button @click="setTheme('skyblue')">更新主题</button>

methods:{
// 分模块的映射
...mapMutations('setting', ['setTheme']),
...mapMutations('user', ['setUser']),
}

4.1.6 获取模块内的actions

默认模块中的 mutation 和 actions 会被挂载到全局，需要开启命名空间，才会挂载到子模块。

获取模块内的actions

• 直接通过 store 调用 $store.dispatch('模块名/xxx ', 额外参数)
• 通过 mapActions 映射
  1. 默认根级别的映射 mapActions([ ‘xxx’ ])
  2. 子模块的映射 mapActions(‘模块名’, [‘xxx’]) - 需要开启命名空间

示例：
modules/user.js

const actions = {
  setUserSecond (context, newUserInfo) {
    // 将异步在action中进行封装
    setTimeout(() => {
      // 调用mutation   context上下文，默认提交的就是自己模块的action和mutation
      context.commit('setUser', newUserInfo)
    }, 1000)
  }
}

直接通过 store 调用 $store.dispatch('模块名/xxx ', 额外参数)

<button @click="updateUser2">一秒后更新信息</button>

methods:{
    updateUser2 () {
      // 调用action dispatch
      this.$store.dispatch('user/setUserSecond', {
        name: 'xiaohong',
        age: 28
      })
    },
}

辅助函数

<button @click="setUserSecond({ name: 'xiaoli', age: 80 })">一秒后更新信息</button>

methods:{
  ...mapActions('user', ['setUserSecond'])
}

4.1.7 模块化数据的使用小结

• 直接使用：

state:$store.state.模块名.数据项名
getters:$store.getters['模块名/属性名']
mutations:$store.commit('模块名/方法名',其他参数)
actions:$store.dispatch('模块名/方法名',其他参数)

• 借助辅助方法：

导入 import {mapState,mapGetters,mapMutations,mapActions}

computed:{
//  默认根级别的映射：mapXxxx([ 'xxx' ])     
    ...mapState('模块名',['数据项'])
   ...mapGetters('模块名',['方法名'])
},
//默认模块中的 mutation 和 actions 会被挂载到全局，需要开启命名空间，才会挂载到子模块。
methods:{
    ...mapMutations('模块名',['方法名'])
    ...mapActions('模块名',['方法名'])
}
组件中直接使用 属性 {{数据项}} 或 方法 @click="方法名（参数）"