vuejs学习6.1 Vuex，state

Vuex概念

Vuex是一个专为vuejs应用程序开发的状态管理模式，他采用集中式存储管理，状态可以理解为变量

状态管理

理解为多个变量需要共享，可以创建一个对象看作一个管家，多个组件需要使用时进行获取，
集中式存储管理即一起管理状态（变量）
这个管家对象数据是响应式的
可以自己封装一个对象来实现变量共享，但是无法做到响应式，所以创建了Vuex

管理什么状态

多个组件共享状态：例如登陆状态，用户名称，头像，购物车物品，收藏

单页面状态管理

状态改变界面，界面上进行动作，动作改变状态

Vuex使用

添加插件

npm intall vuex --save

使用Vuex

步骤

1，src下创建一个文件夹store，放Vuex管理文件
2，进行配置，

import Vue from 'vue'
import Vuex from 'vuex'
//安装插件
Vue.use(Vuex)

//创建对象
const store = new Vuex.Store({
  state:{
    count:1000
  },
  mutations:{

  },
  actions:{

  },
  getters:{

  },
  modules:{

  }
})

//导出store
export default store

3，使用Vuex，在main.js中

import Vue from 'vue'
import App from './App'

import store from "./store";

Vue.config.productionTip = false

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

4，然后之后调用可以直接使用$store来获取配置的Vuex对象，如获取共同管理的count，可以直接 $store.state.count来获取共同管理的count数据

Vuex状态管理图例

注解：
state,actions,mutations属于Vuex
组件可以引用Vuex里面的state
但是修改Vuex中的state不是直接修改的（可以修改成功，不会报错），而是通过修改mutations来修改state
原因：devtools是Vue开发的一个浏览器插件，可以记录每次修改state的状态，可以跟踪是哪个界面修改的state，便于调式。是通过mutations来检测的

但是可以直接修改mutations来修改state，
而action的目的：
action是为了实现异步操作，因为mutations只能实现同步操作，action是结束了异步操作，到mutations都是同步操作了

而异步操作是通过网络请求，所以后端（backend）请求API

修改数据

在Vuex配置中设置mutations

mutations:{
    increment(state){
      state.count++
    },
    decrement(state){
      state.count--
    }
  },

在界面中调用时调用自己的函数

<button @click="add">+</button>
    <button @click="sub">-</button>

自己函数与Vuex内部的mutations对应，注意格式为this.$store.commit(‘方法名’)

methods:{
    add(){
      this.$store.commit('increment')
    },
    sub(){
      this.$store.commit('decrement')
    }
  }

state

存放状态相关信息，其他地方可以通过$store.state.name来获取

单一状态树

单一数据源，如果状态信息保存到多个store对象中，后期维护管理困难，所以Vuex使用单一状态树管理应用层级的全部状态，即只使用一个store来管理，单一状态树能够直接找到某个状态，更加方便管理和维护。