Vuex的基本概念

一、vuex初识

• 概念：是状态管理器
• 优点：数据的更新是响应的
• 作用：是在vue项目中管理数据
• 地址：http://v3.vues.vuejs.org/zh/
• 使用vuex的原因：组件的通讯是很复杂的，方便进行组件通讯

二、使用

• 安装(要指定的版本)：yarn add vuex@3.6.2     |    npm i vuex@3.6.2
• 创建配置store store/index.js

// 在src下面创建文件夹store,store文件夹创建index.js文件，文件内容如下：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.store({
配置项/核心概念
})

export default store  

• 挂载实例main.js 

// 在main.js中接收
import store from '@/store'   // 正常路径应该是@/store/index.js   但是默认会去找index.js文件，所以这里可以省略   @表示src

new Vue({
...,
store,
})

 三、Vuex的核心概念——state

• 作用：存储共享的数据（任何组件都可以访问这里面存的数据）
• 创建：new Vuex.Store({state:{num:10}})
• 访问的方式有两种：

1. $store.state.xx

2. import {mapState} from 'vuex'
   
   computed:{
   ...mapState(["xx"])
   },

四、Vuex的核心概念——getters

• 作用：建立快捷访问的方式
• 创建：new Vuex.Store({getters:{username(state){return state.userinfo.xx}}})
• 访问的方式有两种：

1. $store.getters.xx

2. import {mapGetters} from 'vuex'
   
   computed:{
   ...mapGetters(['xx'])
   },

五、Vuex的核心概念—— mutations

• 作用：唯一的直接修改数据的地方
• 创建：

  new Vuex.Store({
    ...    
     mutations:{
       fn(state,data){
         state.xx = data
         }
       }
  })
  // 形参1：state的数据对象
  // 形参2：可选参数，接收外传入的数据

• 访问的方式有两种：

1. $store.commit('fn',data)

2. import {mapMutations} from 'vuex'
   
   
   methods:{
   ...mapMutations(['fn'])
   },

六、 Vuex的核心概念—— ations

• 作用：异步修改数据，间接修改数据
• 创建：

  new Vuex.Store({
      .....    
      ations:{
         AayncFn(context,data){
           context.commit('fn',data)
         }
      }
  })
  // context：上下文对象，里面有commit和dispatch可以直接调用
  // data:可选参数，接收外部传入的数据

• 访问的方式有两种：

 

1.  $store.dispatch('fn',data)

2. import {mapActions} from 'vuex'
   
   
   methods:{
   ...mapActions(['fn'])
   },