【vue2第二十章】vuex使用 (state,mutations,actions,getters)

vuex是什么？

Vuex是一个用于Vue.js应用程序的状态管理模式。它允许您在应用程序中管理共享状态，并以可预测的方式进行状态更新。Vuex集成了Vue的响应式系统，使得状态的变化能够自动地更新视图。使用Vuex，您可以将应用程序的状态集中存储在一个地方，而不是分散在各个组件中。这样可以方便地跟踪、调试和管理应用程序中的状态，并且能够更好地处理复杂的应用程序逻辑和状态间的依赖关系。总之，Vuex可以帮助您更好地组织和管理Vue.js应用程序的状态。
用大白话来说就是，vuex是一个插件，可以帮助我们管理vue的通用数据(多组件共享数据)

使用vuex就是很多个组件都可以使用一份数据，也可以对这同一份数据进行维护，不需要再使用组件之间的通讯方式，每个组件直接访问vuex里面的数据。如下图：

构建vuex(多组件数据共享)环境。

在创建项目时没有选择vuex时，需要手动安装，如果已经勾选则可以直接使用。接下来是手动安装步骤。

主要分为四步(这里使用的时npm)：

1. 在项目路径下打开终端输入 npm install vuex@3.6.2 --save
2. 在src目录下创建文件夹store，在其中创建index.js文件。

3. 在index.js文件中引入vuex，创建仓库后导出。

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store =new Vuex.Store();
export default store;

4. 在main.js文件中直接导入，然后挂载

import Vue from 'vue'
import App from './App.vue'
import store from "@/store/index"

Vue.config.productionTip = false

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

vuex如何提供数据和访问数据（state）。

vuex提供数据 核心概念state

在创建仓库时，添加state对象，在state对象中添加数据。如下：

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store =new Vuex.Store({
   
    state:{
   
        count:0,
        title:'大标题'
    }
});

export default store;

vuex访问数据（直接访问 和 使用mapState辅助函数）

访问数据也就是如何使用数据。

在标签中直接使用模板语法{ { $store.state.数据名称}}即可访问数据。
在js代码中，使用this.$store.state.count访问数据。

<template>
  <div id="app">
    <div>{
  { $store.state.title }}</div>
    <p>{
  { $store.state.count }}</p>    
  </div>
</template>

<script>
export default {
     
  name: 'App',
  created(){
     
    console.log(this.$store.state.count)
  }
}
</script>

以上方法每次使用数据都需要写一大串，所以vuex也提供了简便方法，通过辅助函数。

使用展开运算符的原因是，可以继续扩展组件需要的计算属性，不会因为一个mapState就把整个计算属性占满导致无法使用组件计算数据。

<template>
  <div>
   <!--3. 最后直接通过属性名使用数据 -->	
    <p>{
  { title }}</p>
    <p>{
  { count }}</p>
    <button @click="changecount">新增</button>
  </div>
</template>

<script>
//1.导入mapState辅助函数
import