vue-vuex基本使用-单界面到多界面状态管理的切换

？　　在之前的学习中，一个页面的状态管理是有三个步骤的，如下：

 

 

 　　现在，多界面间的状态管理会更常见，由Vuex来管理和操作。

　

　　Vuex的基本使用步骤如下：

　　1. 下载Vuex插件

npm install vuex --save

　　2. src下创建store目录(vuex的东西会放在该目录下)，该目录创建index.js，内容如下：

　　3. 在Index.js安装Vuex，并创建Vuex.Store对象（并不是创建Vuex对象，而是Vuex中的Store对象）

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state:{
　　counter: 1000
},
  getters: {},
  mutations: {},
  actions: {},
  modules: {}
})

export default store

　　4. 在main.js的Vue实例使用store对象，如下：

 

 

 　　在Vue注册了store对象，就想到于给Vue.prototype.$store进行赋值，到时候其他组件想要拿到该store对象，只要获取$store即可

　　5. 随便创建一个vue文件，尝试获取state的counter属性值，如下：

<template>
  <div>
    <h1>我是首页页面</h1>
    <h2>{{$store.state.counter}}</h2>
  </div>
</template>

　　显示结果如下：

 

 

 　　真的可以获取到了，那能不能修改通过点击事件去修改counter的值呢？如下：

<template>
  <div>
    <h1>我是首页页面</h1>
    <h2>{{$store.state.counter}}</h2>
    <button @click="$store.state.counter++">counter+1</button>
  </div>
</template>

　　经过测试，是可以这样修改的。但是极其不建议这样做，vue官方也不建议做。vue官方是可以让我们去修改vuex中的状态的，但得按照指定的流程和格式修改才行，下面是官方提供的修改vuex的流程：

 

 

 　　可能大家一眼看上去不是很清楚，下面解释下

　　如果我们想要修改state，有两种方式：

　　　　1. conpenents -> Mutations -> State

　　　　2. conpenents -> Actions -> Mutations -> State

　　可以看到两种方式的区别只是有无Actions，而Mutations是必须存在的。也就是state的修改必须由Mutation来完成(这个步骤不需要我们做)，还有一个好处是Devtools(vue提供的一个浏览器插件)是用来监控Mutations，Mutations对state进行了怎样的修改都会被记录，在追踪state状态时很重要

　　那通过Mutation就可以完成了，为什么还要多个Action呢？是这样的，Mutations中只能存在同步操作和代码，像一些异步操作是不行的，Devtools也监控不到，因此异步操作的代码就可以放在Actions来完成了。

　　实际上，上面的图需要我们做的只有两步，即 dispatch(发布)和 commit(提交)，像mutate不需要我们做。