Vuex----vue的状态管理模式

Vuex----vue的状态管理模式

博客说明

文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!

简介

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

官方文档

https://vuex.vuejs.org/zh/guide/state.html

安装

进入到项目目录里面

cnpm install vuex --save

核心概念

State(单一状态树)

意思就是用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源”而存在。这也意味着,每个应用将仅仅包含一个 store 实例

// 创建一个 Counter 组件
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }
}

Getter(State的派生)

有时候需要从store 中的 state 中派生出一些状态,所以就会用到getter了

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

Mutation(State唯一的改变方法)

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

Action(提交而不改变)

Action 提交的是 mutation,而不是直接变更状态,它 可以包含任意异步操作。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

Module(分割模块)

由于使用单一状态树,应用的所有状态会集中到一个比较大的对象,可以将store对象分割成一些模块。

感谢

vuex

以及勤劳的自己

原文地址:https://www.cnblogs.com/guizimo/p/12504584.html

时间: 2024-10-08 06:39:29

Vuex----vue的状态管理模式的相关文章

理解Vue的状态管理模式Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 状态管理模式.集中式存储管理,一听就很高大上,蛮吓人的.在我看来 vuex 就是把需要共享的变量全部存储在一个对象里面,然后将这个对象放在顶层组件中供其他组件使用.这么说吧,将vue想作是一个js文件.组件是函数,那么vuex就是一个全局变量,只是这个"全局变量"包含了一些特定的规则而已. 在vue的组件化开发中,经常会遇到需要将

基于vue前端状态管理模式

本文仅介绍及区分localstorage.vuex以及vue的全局变量.组件. 一.localstorage简介 localStorage.sessionStorage以及cookie都是在浏览器用来存储数据的,只是作用于浏览器,不会存在与服务器交互的情况.sessionStorage只在当前的域名中有效,重新打开一个新窗口就会重新创建一个sessionStorage对象.而localstorage会一直存在,直到我们手动清除浏览器数据,否则会一直存在浏览器中. 二.vuex简介 vuex是专门

Vue中状态管理——Vuex

vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试. 在vuex出现之前,vue里面的状态是属于'单向数据流'.举个官网的例子: new Vue({ // state data () { return { count: 0 } }, // view template: `<div>{{ count }} </div`, // actions methods: { increment () { this.count++ } } }) 其中 state

4-Vue中的状态管理模式

安装 npm install vuex --save 在自定义文件夹中的index.js中书写内容 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { user: { } }, mutations: { login (state,user) { state.user=user; } } }) 如 将其注入到vue中 存入 取出 computed: 

Vuex-一个专为 Vue.js 应用程序开发的状态管理模式

为什么会出现Vuex 非父子关系的组件如何进行通信?(Event Bus)bus.js import Vue from 'vue'; export default new Vue(); foo.vue import bus from './bus.js'; export default { methods: { changeBroData() { bus.$emit('changeBarData'); } } } bar.vue import bus from './bus.js'; expor

Vuex内容解析和vue cli项目中使用状态管理模式Vuex

中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: 22 }, getters: { personInfo(state) { return `My name is ${state.name}, I am ${state.age}`; } } mutations: { SET_AGE(state, age) { commit(age, age); } }, acti

Vuex,状态管理模式

对于 Vue 本人目前接触不深,只得浅层分析,Vue 是单向数据流, state,驱动应用的数据源: view,以声明方式将 state 映射到视图: actions,响应在 view 上的用户输入导致的状态变化. 子组件内部不能直接修改从父级传递过来的数据,子组件与子组件之间无法相互传递数据.如果我们想让两个子组件之间进行通信的话,可以借助子组件 A 向父组件传值,父组件接收子组件 A 的数据后再传给 B 组件这样的方式进行通信. 这就有一个尴尬的问题了,要是子组件 A 上面还有一层父组件,子

vue组件化开发-vuex状态管理库

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能. 以上是vuex的官方文档对vuex的介绍,官方文档对vuex的用法进行了详细的说明.这里就不再细讲vuex的各个用法,写这篇博客的目的只是帮助部分同学更快地理解并上手vuex.

vue从入门到进阶:Vuex状态管理(十)

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 在 Vue 之后引入 vuex 会进行自动安装: <script src="/path/to/vue.js"></script> <script src="/path/to/vuex.js"></script> 可以通过 https://unpkg.com/[em