Vuex的基本使用以及访问和修改状态的方法

一.Vuex的定义

Vuex是一个专门为 Vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件状态。vuex提供了一个在多个组件间共享状态的插件，做到了响应式。

那么状态管理到底是什么呢？

• 我们可以简单的将其看成把多个组件共享的变量全部存储在一个对象里面
• 然后把这个对象放在顶层的Vue实例中，让其他组件都可以使用

二.Vuex具体管理哪些状态

• 比如用户的登录状态、用户名称、头像、地理位置等
• 比如商品的收藏、购物车的物品等

三.Vuex的使用

1.因为Vuex属于一个插件，要想使用时，需要先进行安装npm install vuex --save
2.在src文件夹下，新创建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.导出store对象
export default store

3.在main.js文件中进行导入

4.在共享状态时，使用$store.state.counter,即使用store对象中state内部的一个状态

三.mutation案例的监听

mutation中用来存放方法。当我们想让state中变量的状态发生变化时，必须通过mutation中的方法来更改。因为只有通过mutation更改的变量我们才能通过devtools跟踪变量状态的变更路径，方便回溯。

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

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

//2.创建对象
const store = new Vuex.store({
	state:{ // 存放状态（即变量）
		count:1000
	}, 
	mutations:{
		increment(state) { // mutation中的方法要设置state参数
            state.count++
        },
        decrement(state) {
            state.count--
        }
	},
	actions:{},
	getters:{},
	modules:{},
})

//3.导出store对象
export default store

在使用时，其他组件利用store对象中保存的状态即可

• 通过this.$store.state.属性 的方法来访问状态
• 通过this.$store.commit(‘mutation中的方法’) 来修改状态

// App.vue
<template>
  <div id="app">
    <p>{{count}}</p>
    <button @click="addition">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  computed:{
    count() {
      return this.$store.state.count
    }
  },
  methods:{
    addition() {
      this.$store.commit('increment')
    },
    decrement() {
      this.$store.commit('decrement')
    }
  }
}
</script>