Vuex的使用

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

首先举一个适用场景，比如一个app登录时获取到了用户的一些信息，在后面的页面交互操作发送请求时，需要当成参数来传递， 如果没有一个状态管理，那么每次发送请求的时候都需要先获取用户的信息，这不仅麻烦，而且会影响到浏览器的性能，不利于用户的体验。

安装Vuex

首先搭好vue-cli脚手架，然后Npm输入

npm install vuex --save

这里讲一句题外话 --save 是生产环境中使用的
--save-dev 是开发环境中使用的， 他们的区别在于打包时， 开发环境中的modules会被忽略。
在vuex安装好之后我们通过一个demo来了解Vuex的使用

Vuex的使用

先新建一个文件夹，我们就起名为 Vuex ，在文件夹下新建一个js文件 store.js ， 进入 store.js ，代码如下

//引入vue以及vuex
import Vue from 'vue';
import Vuex from 'vuex';
//全局调用
Vue.use(Vuex);

//定义一个变量 count
const state = {
  count: 1
}
/*
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
*Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
*这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数
*/
const mutations = {
  add(state){
    state.count++;
  },
  rm(state){
    state.count--;
  }
}

//导出变量以及方法
export default new Vuex.Store({
  state,
  mutations
})

配置好了之后我们就可以去全局使用vuex定义的变量了，我们先直接去 HelloWorld.vue 使用，代码如下

<template>
<div>
  <!--
    通过 $store.* 调用store导出的变量
  -->
  <h3> {{$store.state.count}} </h3>
  <p>
    <!--
      更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
      Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
      这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数
    -->
    <button @click=" $store.commit('add')">++</button>
    <button @click=" $store.commit('rm')">--</button>
  </p>
</div>
</template>

<script>
// 引入vuex下的js文件
import store from '@/vuex/store'

export default {
  //注意  这里需要定义store
  store
}
</script>

进阶

代码如下

<template>
<div>
  <h2>{{msg}}</h2>
  <br>
  <!--
    使用 mapState 辅助函数将组件中的 computed 映射为 count 调用（需要在根节点注入 store）
  -->
  <h3> {{count}} </h3>
  <p>
    <!--
      方法中添加参数
    -->
    <button @click=" add(mas)">++</button>
    <button @click=" rm">--</button>
  </p>
</div>
</template>

<script>
//引入vuex文件
import store from '@/vuex/store';
//使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）
import {mapState,mapMutations} from 'vuex';

export default {
  data(){
    return {
      msg: 'Hello Vuex',
      //参数，
      mas: 'sasasa'
    }
  },
  //
  store,
  //使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）
  methods:mapMutations(['add','rm']),
  //计算属性中使用mapState 
  computed: mapState(['count'])
}
</script>

<style>

</style>