Vue学习28_Vue的状态管理vuex

Vue的状态管理vuex

1. Vuex：Vuex是一个专门为vue.js应用程序开发的状态管理模式，状态管理可以理解成把需要多个组件共享的变量全部存储在一个对象里；
2. 什么样的变量需要存放在vuex：比如说用户的登陆状态、用户名称、头像、地理位置；比如说商品的收藏，购物车的物品；
3. vuex的基本使用：
   单页面状态管理：state中的数据在view中显示，view中的数据又可以执行一些actions，actions的执行又可以改变state中的数据，这样叫做单页面状态管理。
   
   示例代码：

<template>
  <div id="app">
    <h2>{{ message }}</h2>
    <h3>{{counter}}</h3>
    <button @click="counter++">+</button>
    <button @click="counter--">-</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      message: "我是APP组件",
      counter: 0,
    };
  },
};
</script>

多页面状态管理就需要使用到vuex：
当需要在其他界面是用到counter变量时，可以通过父子组件间的数据传递props进行参数传递，但是当项目开发到最后时，会形成一个组件树，这时候倘若底层想要调用根的参数就显得特别麻烦：

新建一个HelloVuex的组件，需要获取到App实例中的counter：
示例代码：提示router未定义

解决思路，使用到vuex进行状态管理：
示例代码：HelloVuex.vue代码：

<template>
  <div>
    <h2>{{ $store.state.counter }}</h2>
  </div>
</template>

<script>
export default {
  name: "HelloVuex",
};
</script>

<style>
</style>

首先应该安装vuex：使用命令:npm install vuex --save
这里有一个小坑就是你的项目名称不能取vuex，我就是项目名称取了vuex，导致在package.json文件夹中出现了name为vuex的配置，导致一直安装失败：
安装成功后，新建一个文件夹store（一般来说都是取这个名称，并不是固定的），在里面创建一个index.js用于存放vuex的代码，因为vuex是状态管理的插件，你要用到这个插件的原因是有些变量你希望共享给很多个插件，假如这时候你将这些变量放置在某一个组件内，都感觉不合适，最好的处理办法就是独立出来：
/store/index.js示例代码：

import Vue from 'vue'
import Vuex from 'vuex'

// 1.安装插件
Vue.use(Vuex)

// 2.创建对象
const store = new Vuex.Store({
    state:{

    },
    mutations:{

    },
    actions:{

    },
    getters:{

    },
    modules:{
        
    }
})

// 3.导出对象
export default store

创建完成store完成之后，需要将store挂载到app中，转main.js操作：

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

这时候，如果想在其他界面中使用vuex中的对象，就可以通过（$store.state.变量名）的形式进行调用：
运行结果：

为什么不直接在vue components中对state数据进行修改：vue components确实也可以通过 $store.state.变量名对state的数据进行修改，但是vue为我们提供了一个浏览器插件Devtools用于跟踪数据的修改，倘若在vue components进行数据修改，那么Devtools将无法对数据在哪里修改进行跟踪。