首页 > 其他分享> 文章详细

Vue之Vuex的使用

2020-07-10 18:34:36 阅读：269 来源： 互联网

标签：Vue state mutation 使用 Vuex Store typeof

前言

简单记录一下Vuex使用

什么时候使用

当我们的多个vue实例（页面）或者组件绑定了同一个变量时，我们应该怎么处理？

如果是父子组件，我们可以使用props和emit来解决；
如果是兄弟组件（没有关联的两个页面），我们可以考虑使用全局变量，甚至是eventHub等全局监听对象；（使用vue.prototype.xxx挂载的变量并不是相应式的，可以在全局Vue实例的data中添加变量）
当然Vue官方建议的是使用Vuex去解决；

使用规则

修改state需要通过提交mutation事件来实现;
mutation的实现必须是同步操作;
对于异步操作需要通过分发action来实现；（async action => mutataion => state）

Vuex与全局变量的区别

Vuex的状态存储是响应式的；
修改state时需要通过提交mutation来完成；

vuex中state的修改为什么需要使用mutation来完成？

使用mutation来修改state，可以更好的监听每个state值得变化；（可以再对应修改位置，添加打印，或进行数据的处理，更方便的监听和调试）；
更好的兼容官方调试工具devtool；（通过监听mutation事件来实现）；

为什么需要使用action来完成异步的mutataion操作？

mutation类似于创建一个事件，函数相当于事件的回调函数；
当回调函数为异步函数时，我们无法确定多个mutation的执行顺序；
当我们处理事务相关的操作，无法确定修改顺序；
不方便使用devtools来调试state，难以确定执行顺序， devtools是通过监听mutation事件来实现的；
action可以使用promise-then、async-await来保证mutation的执行顺序；

Vuex的导出了哪些对象？

Store: 用于创建Store存储实例；
install: 注册到Vue暴露的方法；
mapxxx: 简化vuex的引用；
createNamespacedHelpers: 简化具有命名空间的模块引用；

declare const _default: {
  Store: typeof Store;
  install: typeof install;
  mapState: typeof mapState,
  mapMutations: typeof mapMutations,
  mapGetters: typeof mapGetters,
  mapActions: typeof mapActions,
  createNamespacedHelpers: typeof createNamespacedHelpers,
};
export default _default;

创建Vuex.Store实例

以一个简单登录验证为例

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import { login } from '../api/auth/login'
import { setCookie } from '../libs/cookie'
import md5 from '../libs/md5'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        user: {
            uuid: '',
            username: 'xxx',
            nickname: 'developer',
            headImage: '',
            auth: []
        }
    },
    mutations: {
        setUserInfo(state, { uuid, username, nickname }) {
            state.user = Object.assign(state.user, { uuid, username, nickname })
        }
    },
    actions: {
        async login({ commit, state }, { username, password }) {
            const inputInfo = { username: username, password: md5(password) }
            const ret = await login(inputInfo)
            if (ret && ret.uuid) {
                commit('setUserInfo', ret)
                setCookie('token', ret.token)
                return true
            }
            return false
        }
    },
    plugins: [createPersistedState({ // 避免页面刷新后重新初始化state
        storage: window.localStorage
    })]
})

在Vue实例中怎么引用？

在入口文件main.js中注册后，Store下的state、mutation、action就被挂载到Vue.$store下了，可以直接调用；
如果引入的数量较多时，可以使用Vuex导出的mapxxx方法来批量引入；
在computed中进行引用，更好的监听状态的修改；

参考链接

官方Vuex链接

总结

标签：Vue,state,mutation,使用,Vuex,Store,typeof
来源： https://www.cnblogs.com/xpengp/p/13280723.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9