Vuex是对状态的管理, 这里的状态所指的就是data。
以前我们的组件通信一直是个问题,例如兄弟组件通信，这个时候就比较难办，如果使用Vuex就可以很轻松的解决这个问题。
Vuex可以将你以前放在data里面的一些数据放在store里面，那这样大家都从store里面获取数据，store数据一改变，那么其他使用这个数据的组件也改变了。（好用的很👌）
基操
- 安装
yarn add vuex
- 创建store
import Vuex from 'vuex' Vue.use(Vuex)
- 声明
store,src/store/index.js
import Vuex from 'vuex'; import Vue from "vue"; Vue.use(Vuex); const state = { data: 'this is Vuex state' // 在Vuex里面声明一个状态 }; const mutations = { changeData: function(state, newData) { state.data = newData; // 在Vuex里面去修改这个状态 ，凡是要想修改state里面的数据，就要使用mutations里面的函数 } }; // 创建store, 传入Vuex的核心概念之 state，mutations const store = new Vuex.Store({ state: state, mutations: mutations }); export default store;
虽然现在已经有了一个store, 但是并没有在组件里面使用, 如果我现在需要把store里面的数据拿出来渲染, 并且修改Vuex里面的数据, 使得数据改变, 页面也随着改动。
- 使用到组件中,使得数据响应
views/Home/Home.vue
<template> <div class="VuexDemo"> <div>vuex demo<div> name is {{name}} <button @click="changeName">修改名称</button> </div> </template> <script> import store from '../../store/index'; // 这个时候需要把store中的状态展示到页面中, 我们会在computed里面声明, 让他去获取store里面的数据 export default { // 这样页面中就可以使用name变量， 然后就可以获取store里面的data数据, 使用computed这样还可以缓存数据, 对于优化也是很不错的 computed: { name() { return store.state.data } }, methods: { changeName() { // 点击事件触发这个函数, 再由这个函数去触发 Vuex里面的mutation。commit去调用mutation里面的函数，第一个参数是对应mutation里面的函数名，第二个是参数 store.commit('changeData', 'this is new Vuex State'); } }, } </script>
这样一套流程的话,从store里面获取数据,然后再修改store里面的数据重新渲染,这样就已经是对状态的一种管理了。
但是单单这样使用, 还是存在一些问题。
如果说state里面数据特别多, 那我岂不是写了很多没啥der用的computed, 重复劳动了这不是。Vuex提供了一个函数mapState
views/Home/Home.vue
// 之前 computed: { name() { return store.state.data } } // 使用mapState computed: mapState({ // 箭头函数可使代码更简练 count: state => state.count, // 传字符串参数 'count' 等同于 `state => state.count` countAlias: 'count', // 为了能够使用 `this` 获取局部状态，必须使用常规函数 countPlusLocalState (state) { return state.count + this.localCount } })
这样的话起码对store里面多个数据 传递到组件中是可以解决了。这篇就到这里了，Vuex打算多写几篇，写到细一点，把坑说一下，那在Vuex里面如何进行异步操作呢？虽然可以在组件中进行请求完了,然后再commit, 但是代码也会在UI组件中增加, Vuex有没有解决方案呢？请看下篇！
- 前情提要：
mutations里面只能修改state, 并且只能是同步 - 如果在使用
store之前没有Vue.use(Vuex)必然在使用过程中出现vuex computed Cannot read property 'state' of undefined"错误，小心点 靓仔
本文为作者原创，手码不易，允许转载，转载后请以链接形式说明文章出处。
