vue 状态管理Vuex

vuex是状态管理，是为了解决跨组件之间数据共享问题的，一个组件的数据变化会映射到使用这个数据的其他组件当中。如果刷新页面，之前存储的vuex数据全部都会被初始化掉。以一个全局单例模式管理
当应用遇到多个组件共享状态时使用Vuex，即：多个视图依赖于同一个状态，不同视图的行为需要变更同一状态。

1、Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2、你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

安装vuex

npm install vuex --save

创建store（创建的路径是/src/store/index.js）

// 创建全局store
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
// 使用本地存储（localStorage、sessionStorage、cookie）来解决刷新网页后vuex的state数据丢失的问题
// 这里以uniapp开发微信小程序为例，使用uniapp的storageSync
const store = new Vuex.Store({
    state: {
        userInfo: null || uni.getStorageSync('userInfo')
    },
    mutations: {
        setUserInfo: (state, obj)=>{
            uni.setStorageSync('userInfo', obj);
            state.userInfo = obj
        }
    },
    getters:{
        userInfo: (state) => {
            return state.userInfo || uni.getStorageSync('userInfo')
        }
    }
})

全局引入store

import store from "./store";

// store方法1 把store=挂载到vue原型链上
Vue.prototype.$store = store;

// store方法2 Vue中实例化store
new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

 使用

// 更新
this.$store.commit('setUserInfo', {…})

// 获取
// getters可以直接使用也可以通过辅助函数mapGetters来使用
// mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性
// 使用mapGetters时可使用对象运算符(‘...’)将 getter 混入 computed 对象中
<script>
    import { mapGetters } from "vuex";
    export default {
        computed: {
            // 辅助函数 若获取多个states时使用数组模式，以数组形式传入多个getters的名称
            ...mapGetters(["userInfo"]),
            // 获取单个states时直接调用getters即可
            userInfo() {
                return this.$store.getters.userInfo;
            }
        }
    };
</script>

拓展：

有个疑问是？为什么明明能直接获取state为什么还要使用getters呢？

在介绍state中我们了解到，在Store仓库里，state就是用来存放数据，若是对数据进行处理输出，比如数据要过滤，一般我们可以写到computed中。但是如果很多组件都使用这个过滤后的数据，我们是否可以把这个数据抽提出来共享？这就是getters存在的意义。
简单是理解：
state：Vuex的数据中心，相当于vue中的data。
getter：返回对state数据的装饰，相当于vue中的computed。<例：返回格式化后的时间、返回多个state数据的计算结果>