Vuex知识总结

一、Vuex 状态管理模式

Vuex是一个专为Vue.js应用程序开发的状态管理模式。
状态管理：
把需要多个组件共享的变量全部存储在一个对象里面，然后将这个对象放在顶层的Vue实例中，让其他组件可以使用

1、单界面的状态管理

在单个界面进行状态管理，包括以下几部分：

• state：状态，驱动应用的数据源（姑且可以当作是data中的属性）
• view：视图层，以声明的方式将state映射到视图。即可以针对state的变化，显示不同的信息
• actions：响应在view上的用户输入导致的变化，即用户的各种操作点击、输入等，会导致状态的变化
  官网上的“单向数据流”理念图：
  

案例：
案例中的状态管理是针对于个数counter，它需要某种方式被记录下来，也就是我们的state。counnter目前的值需要被显示在页面中，也就是view部分。界面发生某些操作，这里是用户的按钮点击，需要去更新状态，也就是actions

<template>
  <div id="app">
    <h2>当前计数：{
   {
   counter}}</h2>
    <button @click="counter++">+</button>
    <button @click="counter--">-</button>
  </div>
</template>

<script>
export default {
   
  name: 'App',
  data () {
   
    return {
   
      counter: 0
    }
  }
}
</script>

2、多界面状态管理

当遇到多个组件共享状态时，可能出现的情况：

1. 多个视图都依赖同一个状态（一个状态修改，多个界面需要进行更新）
2. 不同界面的actions都想修改同一个状态

也就是说，对于某些状态来说只属于某一个视图；但有一些状态属于多个视图共同想维护的
因此，需要将组件的共享状态出来，以一个全局单例模式管理。
全局单例模（大管家）：
也就是将共享的状态抽取出来，交给大管家统一进行处理。之后每个视图按照规定好的规则进行访问和修改操作

3、Vuex使用案例

每个Vuex应用的核心就是store（仓库）。相当于一个容器，包含着应用中大部分的状态（state）。Vuex和单纯的全局对象有两点不同：

1. Vuex的状态存储是响应式的
2. 不能直接改变store中的状态。改变store中的状态的唯一途径就是显式地提交(commit) mutation。这样使得我们可以方便地跟踪每个状态的变化

1）安装

npm install vuex --save

2）创建文件存放Vuex代码

创建文件夹store，并在其中创建一个index.js文件。在该文件中必须显式地通过Vue.use()来安装Vuex

// index.js
import Vue form 'vue'
import Vuex from 'vuex'
// 1.安装插件
Vue.use(Vuex)
// 2.创建对象
const store = new Vuex.store({
   
	state: {
   
		counter: 100
	},
	mutations: {
   
		// 方法 默认参数state
		increment(state) {
   
	   	state.counter++
	    },
	    decrement (state) {
   
	      state.counter--
	    }
	}
})
// 3. 导出store对象
export default store

3）将创建的实例对象store挂载到Vue实例中

// main.js
import Vue form 'vue'
import App form './App'
import store form './store'

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

4）在App.vue文件中使用Vuex中的counter

<template>
  <div id="app">
    <h2>当前计数：{
   {
   $store.state.counter}}</h2>
    <button @click="add">+</button>
    <button @click="sub">-</button>
  </div>
</template>

<script>
export default {
   
  name: 'App',
  components: