资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/vuex笔记

vuex笔记

LeexMuller / 362人阅读

摘要：触发行为与相当于。是具体改变状态的行为，每次的可能被捕捉。而是通过发起执行操作。因此异步行为放在。通过与具体的组件进行绑定。但是，它规定了一些需要遵守的规则应用层级的状态应该集中到单个对象中。提交是更改状态的唯一方法，并且这个过程是同步的。

VUEX 概念

store / module

state / getters

mutations / actions

payload: commit / dispatch时的参数

context: 一个store的新实例，vuex把react中的新state的immutable处理，在框架中就处理了

commit

dispatch

plugins

strict

辅助函数： 用于vuex的state与component绑定

mapState / mapGetter： compose

mapAction / mapMutations: methods

Redux

Dispatch 执行一个 Actions, 通过 一个叫做 Reducer的映射表，计算出新的 State。 Store根据新的State去更新全局组件。

Vuex

通过辅助函数将store的属性与方法，绑定到component中。componet监听用户行为。commit / dispatch 一个行为给 mutation / action。 action 内部也是通过commit去执行 mutation。mutation相当于一个操作 state的列表。

// example
import Vue from "vue";
import Vuex from "vuex";

const store = new Vuex.Store({
    ...
})

new Vue({
    el: "#app",
    store,
    ...
})

store 与 component

// simpliest store
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

1. 在 componet 中通过 this.$store 访问 store。
2. store 触发行为
    this.$store.commit("mutation name", payload);
    this.$store.dispatch("dispatch name", payload);

mutation 与 action

1. mutation 相当于 reducer。 mutation直接在内部改变 state。 reducer 返回一个新的state。
2. mutation 只执行同步操作。 异步层面的操作放在 actions。 mutation是具体改变状态的行为，每次的 mutation 可能被 plugin 捕捉。
3. actions 并不直接对 state进行操作。而是通过发起 mutation 执行操作。因此异步行为放在 actions。 可通过 Promise 或 async/await 去异步执行。
4. mutation/actions 通过 mapMutations／mapActions 与具体的组件进行绑定。

// mutationExap(state, payload) {}
// actionExamp(context, payload) {}

// example
const store = new Vuex.Store({
    state: {
        count: 0,
        name: "default name"
    },
    mutations: {
        exampleMutations1(state) {
            // do something
            state.count++
        },
        exampleMutations1(state, name) {
            
        }
    },
    actions：{
        exampleActions1(context) {
            context.commit("exampleMutations1");
        },
        exampleActions1(context) {
            // "name" is payload
            context.commit("exampleMutations1", name); 
        }
    }
});
基本规则

Vuex 并不限制你的代码结构。但是，它规定了一些需要遵守的规则：

应用层级的状态应该集中到单个 store 对象中。

提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。

异步逻辑都应该封装到 action 里面。

state [type: Object] 
const    store = new Vuex.Store({
    state: {
        count: 1
    }
    mutations: ...
})
modules 
const moduleA = {
    state,
    mutations,
    actions, // 可无
    getters, // 可无
    modules  // 可无, 可嵌套
}

const moduleB = {
    state,
    mutations,
    actions,
    getters
    modules
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})
store.state.a; // -> moduleA 的状态
store.state.a; // -> moduleB 的状态
getter 
const store = new Vuex.Store({
    state: { ... },
    getter: {
        exampleGetter(state, getters) {
            return 
        }
    }
})

const module = {
    state: ...
    getter: {
        exampleGetter(state, getters, rootState)
    }
}
mutations [type: string]: Function 
// like Reducer
const store = new Vuex.Store({
  ...
  mutations: {
    increment (state, playload) {
      // 变更状态
      state.count++
    }
  }
})

Tips

mutation 必须是同步函数

devtools 不知道什么时候回调函数实际上被调用 —— 实质上任何在回调函数中进行的的状态的改变都是不可追踪的

actions

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象?

支持异步：

promise

async / await

示例代码：

function (context) {
}

context = { state, rootState, getters, commit, dispatch}
插件 plugins

https://vuex.vuejs.org/zh-cn/...

store = new vuex.Store({
    ...
    plugins: ["pluginA", "pluginB"]
    // plugins: process.env.NODE_ENV !== "production" ? 
        [myPluginWithSnapshot] : []
})

内置的 Plugins 插件:

logger

模块动态注册 / 按需加载 
动态加载
store.registerModule("myModule", {
  // ...
})
store.state.myModule; // myModule的状态 

store.unregisterModule(myModule); //卸载模块
// 不能使用此方法( unregisterModule )卸载静态模块（在创建 store 时声明的模块）

需要 vue 插件
例如，vuex-router-sync 插件可以集成 vue-router 与 vuex，管理动态模块的路由状态。

严格模式 / 生产环境 ／ 开发环境

详见：https://vuex.vuejs.org/zh-cn/...

严格模式

const store = new Vuex.Store({
  // ...
  strict: true
})

环境

// 严格模式会对状态进行深度检测，影响性能
// 因此，生产环境 禁用
const store = new Vuex.Store({
  // ...
  strict: process.env.NODE_ENV !== "production"
})
测试

// TODO
https://vuex.vuejs.org/zh-cn/...

Api

https://vuex.vuejs.org/zh-cn/...

GPU服务器 服务器托管 Vuex vuex cdn Vue_Vuex 兼容笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85219.html

相关文章

  • 用 Vuex 构建一个笔记应用

    摘要：如果不熟悉，在这个教程里面，我们会通过构建一个笔记应用来学习怎么用。这个是我们要构建的笔记应用的截图你可以从下载源码，这里是的地址。每当用户点击笔记列表中的某一条时，组件会调用来分发这个会把当前选中的笔记设为。 原文：Learn Vuex by Building a Notes App，有删改。 本文假设读者熟悉 Vuex 文档 的内容。如果不熟悉，you definitely sho...

    gggggggbong 评论0 收藏0

  • 使用 Vuex + Vue.js 构建单页应用

    摘要：鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇下的使用方法，传送门使用构建单页应用新篇华丽的分割线原文地址前言在最近学习的时候，看到国外一篇讲述了如何使用和来构建一个简单笔记的单页应用的文章。 鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇 vue2.0 下的 vuex 使用方法，传送门：使用 Vuex + Vue.js 构建单页应用【新篇】 ---------...

    tomorrowwu 评论0 收藏0

  • 使用 Vuex + Vue.js 构建单页应用

    摘要：鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇下的使用方法，传送门使用构建单页应用新篇华丽的分割线原文地址前言在最近学习的时候，看到国外一篇讲述了如何使用和来构建一个简单笔记的单页应用的文章。 鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇 vue2.0 下的 vuex 使用方法，传送门：使用 Vuex + Vue.js 构建单页应用【新篇】 ---------...

    cnsworder 评论0 收藏0

  • 使用 Vuex + Vue.js 构建单页应用

    摘要：鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇下的使用方法，传送门使用构建单页应用新篇华丽的分割线原文地址前言在最近学习的时候，看到国外一篇讲述了如何使用和来构建一个简单笔记的单页应用的文章。 鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇 vue2.0 下的 vuex 使用方法，传送门：使用 Vuex + Vue.js 构建单页应用【新篇】 ---------...

    levius 评论0 收藏0

  • 使用 Vuex + Vue.js 构建单页应用

    摘要：鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇下的使用方法，传送门使用构建单页应用新篇华丽的分割线原文地址前言在最近学习的时候，看到国外一篇讲述了如何使用和来构建一个简单笔记的单页应用的文章。 鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇 vue2.0 下的 vuex 使用方法，传送门：使用 Vuex + Vue.js 构建单页应用【新篇】 ---------...

    UsherChen 评论0 收藏0

  • 使用 Vuex + Vue.js 构建单页应用

    摘要：鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇下的使用方法，传送门使用构建单页应用新篇华丽的分割线原文地址前言在最近学习的时候，看到国外一篇讲述了如何使用和来构建一个简单笔记的单页应用的文章。 鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇 vue2.0 下的 vuex 使用方法，传送门：使用 Vuex + Vue.js 构建单页应用【新篇】 ---------...

    YJNldm 评论0 收藏0

发表评论

登陆后可评论

0条评论

LeexMuller

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<