vuex 快速入门

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.js

import 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
  },
  // 定义mutations
  mutations: {
     
  }
})

格式说明

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