Vuex（基本操作）什么时候使用Vuex 多个组件依赖同一个状态来自不同的组件的行为需要变更同一状态 dispatch

什么时候使用Vuex

多个组件依赖同一个状态
来自不同的组件的行为需要变更同一状态

dispatch()传两个参数第一个参数是动作类型第二个参数是值

npm i vuex
Vue.use(Vuex)
store
vc==>store

注意: vuex现在最新版是vuex4,只能是vue3用 vue2的话要用vuex3 如果版本不对就会报以下错误

引入Vuex

没引入时

vue实例和组件都没有$store属性

引入vuex时

创建store文件夹

在src中创建store文件夹里面放index.js文件

在index.js文件中进行配置

// 该文件用于创建Vuex中最为核心的store
// 引入vuex
import Vuex from "vuex"
// 准备actions--用于响应组件中的动作
const actions = {}
// 准备muations--用于操作数据(state)
const mutations = {}
// 准备state--用于存储数据
const state = {}
//创建store  new Vuex身上的构造函数 写配置对象 创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

在main中导入挂载

import Vue from 'vue'
import App from './App.vue'
import store from '@/store'
import Vuex from 'vuex'
Vue.use(Vuex)
Vue.config.productionTip = false
const vm = new Vue({
  render: h => h(App),
  store
}).$mount('#app')
console.log(vm);

你会发现一个很神奇的错误！

: [vuex]必须调用Vue.use(vuex)在创建store实例之前。

分析原因！

处理！

运行!

你们心心念念的commit 和 dispatch就出来了！

使用dispatch

action 没有 jia 类型我们需要在actions里面创建一个什么传xxx命名的函数参数1为上下文对象参数2为dispacth的value值

我们需要利用commit进行下一步

mutation 没有 jia类型我们需要在mutation在引入commit 传下来的 xxx来创建函数进行数据处理第一个参数为state里进行过数据监视的对象，第二个参数是传下来的value值

我们想调用state里面的内容我们可以$store.state.xxx

vuex在的getter用于将state中的数据进行加工

类似于

利用vuex进行模块化

把每一个模块建立成小仓库进行管理利用

vuex.store({
modules:{
        home,
        login,
        register,
        search
               }
})

进行配置

mapState和mapGetters

我们在引入Vuex中state里面的数据时是否很繁琐，我们的vue宗旨插值中尽量简洁

计算属性实现

但我们发现还是挺繁琐的，我们也没有更好的解决方法呢？

没错！就是我们的mapState了

mapState

第一步：导入mapState

import { mapState } from "vuex";

第二步：我们看看mapState是什么

 mounted() {
    console.log(this);
    console.log(mapState);
  },

单纯写mapState是一个函数，我们执行一下这个函数

 mounted() {
    console.log(this);
    console.log(mapState());
  },

返回值是个对象

mapState()的两种写法

对象写法

我们可以看出它的对象里面包含了函数我们将它门放进计算属性中

Vuex（基本操作）