1.是什么
Vuex 是一个 Vue 的 状态管理工具，状态就是数据。
大白话：Vuex 是一个插件，可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。例如：购物车数据 个人信息数
2 .核心概念 - state 状态
State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储。
打开项目中的store.js文件，在state对象中可以添加我们要共享的数据。
const store = new Vuex.Store({// state 状态, 即数据, 类似于vue组件中的data,// 区别：// 1.data 是组件自己的数据, // 2.state 中的数据整个vue项目的组件都能访问到state: {count: 101}
})如何获得state里的共享数据
获取 store：
1.Vue模板中获取 this.$store
2.js文件中获取 import 导入 store
模板中： {{ $store.state.xxx }}
组件逻辑中： this.$store.state.xxx
JS模块中： store.state.xxx
示例
这是模版中获取
<h1>state的数据 - {{ $store.state.count }}</h1>组件逻辑 也就是 <script>
// 把state中数据，定义在组件内的计算属性中computed: {count () {return this.$store.state.count}}js模块 也就是main.js文件等等
//main.jsimport store from "@/store"console.log(store.state.count)通过辅助函数 mapState获取 state中的数据
需要导入 import { mapState } from 'vuex'
采用数组的形式
mapState(['count']) 等价于
count () {
return this.$store.state.count
}
最终写法是
computed: {...mapState(['count'])}这样的好处是不需要写 this.$store.state
只需要写 count 即可 其它同理
3 .核心概念 - mutations 状态
作用主要是用来修改共享数据的 所有的修改共享数据都应该在这里面写
const store = new Vuex.Store({state: {count: 0},// 定义mutationsmutations: {}
})格式说明
mutations: {// 方法里参数 第一个参数是当前store的state属性// payload 载荷 运输参数 调用mutaiions的时候 可以传递参数 传递载荷addCount (state) {state.count += 1}},其它组件想要修改共享数据 最好使用
commit 里面的参数就是 mutations 里面的 函数名称
this.$store.commit('addCount')当然因为它是函数所以也可以传参
注意：提交的参数只能是一个, 如果有多个参数要传, 可以传递一个对象
辅助函数- mapMutations
mapMutations和mapState很像，它把位于mutations中的方法提取了出来，我们可以将它导入
import { mapMutations } from 'vuex'
methods: {...mapMutations(['addCount'])
}
上面代码的含义是将mutations的方法导入了methods中，等价于
methods: {// commit(方法名, 载荷参数)addCount () {this.$store.commit('addCount')}}
此时，就可以直接通过this.addCount调用了
4.使用步骤（快速入门）
2.1 首先要安装vuex
如果是vue2 就安装 vuex 3 vue3 就安装 vuex4
cnpm install vuex
2.2 创建一个空仓库 并导入到main.js
state 里面存的是共享数据
import {createStore} from 'vuex';const store = createStore({state: {// 定义你的状态},mutations: {// 定义你的 mutations},actions: {// 定义你的 actions},getters: {// 定义你的 getters}});export default store;
import { createApp } from 'vue'
import { createRouter,createWebHistory } from 'vue-router'; // 导入 createRouter 和 createWebHistory
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import store from '@/store/index.js'const router = createRouter({history: createWebHistory(),routes: [/* your routes */]});const app =createApp(App)app.use(router)
app.use(ElementPlus, { size: 'small', zIndex: 3000 })
app.use(store)
app.mount('#app')
2.3
