Vue.js-vuex 详解

1.1 Vuex是做什么的?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

它采用 集中式存储管理 应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

状态管理到底是什么？

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

Vuex就是为了提供这样一个在多个组件间共享状态的插件。

管理什么状态呢?

如果你做过大型开放，一定遇到过多个状态，在多个界面间的共享问题。比如用户的登录状态、用户名称、头像、地理位置信息等等。比如商品的收藏、购物车中的物品等等。
这些状态信息，我们都可以放在统一的地方，对它进行保存和管理，而且它们还是响应式的。

1.2 单界面的状态管理

​

State：不用多说，就是我们的状态。（可以当做就是data中的属性）
View：视图层，可以针对State的变化，显示不同的信息。
Actions：这里的Actions主要是用户的各种操作：点击、输入等等，会导致状态的改变。

代码示例

counter需要某种方式被记录下来，也就是我们的State。

counter目前的值需要被显示在界面中，也就是View部分。

界面发生某些操作时（这里是用户的点击，也可以是用户的input），需要去更新状态，也就是我们的Actions

<template>
  <div class="test">
    <div>当前计数:{
  {counter}}</div>
    <button @click="counter+=1">+1</button>
    <button @click="counter-=1">-1</button>
  </div>
</template>

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

<style scoped>

</style>

1.3 多界面状态管理

创建项目vue init webpack vuetest

​
进入项目终端执行cnpm install vuex --save 命令，安装vuex插件。

全局单例模式（大管家）

​

现在要做的就是将共享的状态抽取出来，交给我们的大管家，统一进行管理。
之后，每个试图，按照规定好的规定，进行访问和修改等操作。这就是Vuex背后的基本思想。

代码示例

先创建一个文件夹store，并且在其中创建一个index.js文件

index.js

// 导入vue
import Vue from 'vue'
import Vuex from 'vuex'

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

// 创建对象
const store = new Vuex.Store({
   
  // 放置状态相关的信息
  state:{
   
    counter: 1000
  },
  // 方法
  mutations:{
   
    increment(state){
   
      state.counter++
    },
    decrement(state){
   
      state.counter--
    }
  }
})

// 导出store
export default store

挂载到Vue实例中,导入store对象，并且放在new Vue中。
这样，在其他Vue组件中，就可以通过this.$store的方式，获取到这个store对象了。

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from "./store";

Vue.config.productionTip = false

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

HelloVuex.vue

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

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

<style scoped>
</style>

APP.vue

通过提交mutation的方式，而非直接改变store.state.count。

Vuex可以更明确的追踪状态的变化，所以不要直接改变store.state.count的值。

<template>
  <div id="app">
    <h3>====APP组件====</h3>
    <h3>{
  {$store.state.counter}}</h3>
    <button @click="addition">+</button>
    <button @click="subtraction">-</button>

    <h3>++++HelloVuex组件++++</h3>
    <HelloVuex/>
  </div>
</template>

<script>
import HelloVuex from "./components/HelloVuex";
export default {
    
  name: 'App',
  // 注册组件
  components:{
    
    HelloVuex
  },
  data(){
    
    return{
    
      message: 'hello Vue.js!!!'
    }
  },
  methods:{
    
    addition(){
    
      this.$store.commit(