这是我参与「第五届青训营」伴学笔记创作活动的第 8 天

vuex的概念及作用

官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

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

状态管理到底是什么？

可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用。这样多个组件就可以共享这个对象中的所有变量属性了自己也可以封装一个对象，但是比较麻烦，要保证它里面所有的属性做到响应式

状态管理：管家一般用变量保存状态 vuex: 状态管理工具响应式插件

  单例模式，所有对象从单例模式中取出的对象都是同一对象
  单例模式的特点：第一次new创建对象，之后再new返回第一次创建的，所以只能创建一个，唯一

    const shareObject = {
      name : 'yuli'
    }
    Vue.prototype.shareObject = shareObject
    // 这样写不是响应式的

    Vue.component('cpn1', {
      // this.shareObject.name
    })
    Vue.component('cpn2', {

    })
    const app = new Vue({
      el : '#app'
    })

管理什么状态

多个状态，在多个界面间的共享

比如用户的登录状态、用户名称、头像、地理位置信息等等，又比如商品的收藏、购物车中的物品等等。

单界面到多界面状态管理切换

vuex是插件,需要安装 -> npm install vuex@3.0.1 --save 运行时也需要,不止开发

如果在main.js里进行vuex代码的编写,会使main文件很大,抽离出来,新建store仓库文件

State在View上显示，View上产生的Actions会改变State

用户点击(行为)->保存在data中的message就是状态->再到视图(view)中展示数据驱动视图改变，视图方法改变数据，一个循环

使用共享状态时,$store.state.counter 加$是为了避免与已被定义的数据、方法、计算属性等产生冲突

用const store变量接收 new vue.store 导出然后导入挂在就定义了，不能 export default=new state getters actions plugins mutations modules plugins strict

04. 多页面的状态管理.png

需要按照规定的格式进行修改操作,否则后续调试时可能出现问题

简单案例

案例要求

在app里可以对counter进行加减操作在hello里展示counter

案例实现

首先，我们需要在某个地方存放我们的Vuex代码：

我们先创建一个文件夹store，并且在其中创建一个index.js文件在index.js文件中写入如下代码：

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

// 1. 安装插件
Vue.use(Vuex)
// 执行use,vue底层执行Vuex.install方法

// 2. 创建对象
// 使用Vuex的Store类
const store = new Vuex.Store({
  state: {   // 保存状态 
  },
  mutations: {
  },
  actions: {
  },
  getters: {
  },
  modules: {
  }
})

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

其次，挂载到vue实例上，让所有的Vue组件都可以使用这个store对象

来到main.js文件，导入store对象，并且放在new Vue中这样，在其他Vue组件中，我们就可以通过this.$store的方式，获取到这个store对象了

import store from './store'
Vue.config.productionTip = false

new Vue({
  el: '#app',
  store, // 这里注册后才会在Vue.prototype.$store = store, 所有的vue组件都会有$store对象
  render: h => h(App)
})

使用Vuex

在index.js里

const store = new Vuex.Store({
  state: {   // 保存状态 
    counter : 100
  },
  mutations: {
    // 方法  默认参数state  自动传入state 
    increment(state) {
      state.counter++
    },
    decrement(state) {
      state.counter--
    }
  },
})

使用时在app里

    <h2>{{ messege }}</h2>
    <h2>{{ $store.state.counter }}</h2>
    //  <button @click="$store.state.counter++">+</button>
    // <button @click="counter--">-</button> 
    <button @click="addition">+</button>
    <button @click="substraction">-</button>
    // <!-- 加$是为了避免与已被定义的数据、方法、计算属性等产生冲突 -->

export default {
  name: 'App',
  components : {
    HelloWorld
  },
  methods: {
    addition() {
      this.$store.commit("increment")
      // 使用commit方法，传入方法名
      // 跟踪每一次的提交的状态
    },
    substraction(){
      this.$store.commit("decrement")
    }
  }
}

小结

好的，这就是使用Vuex最简单的方式了。我们来对使用步骤，做一个简单的小节：

提取出一个公共的store对象，用于保存在多个组件中共享的状态
将store对象放置在 new Vue对象中，这样可以保证在所有的组件中都可以使用到
在其他组件中使用store对象中保存的状态即可通过this. $store.state.属性的方式来访问状态通过this.$ store.commit('mutation中方法')来修改状态

注意事项：

我们通过提交mutation的方式，而非直接改变store.state.count。这是因为Vuex可以更明确的追踪状态的变化，所以不要直接改变store.state.count的值。

vuex ｜ 青训营笔记