vuex的初级

最新推荐文章于 2022-09-09 14:48:14 发布

嘟噜嘟噜123

最新推荐文章于 2022-09-09 14:48:14 发布

阅读量239

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_62371223/article/details/126004521

版权

Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

什么是“状态管理模式”？

让我们从一个简单的 Vue 计数应用开始：

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

这个状态自管理应用包含以下几个部分：

state,驱动应用的数据源
view ，以声明方式将state映射到试图
actions ，响应在view上的用户输入导致的状态变化。

以下是一个表示“单向数据流”理念的简单示意：
请添加图片描述

但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

多个视图依赖于同一状态。
来自不同视图的行为需要变更同一状态。
Vuex 背后的基本思想，借鉴了 Flux (opens new window)、Redux (opens new window)和 The Elm Architecture (opens new window)。与其他模式不同的是，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。
如果你想交互式地学习 Vuex，可以看这个 Scrimba 上的 Vuex 课程 (opens new window)，它将录屏和代码试验场混合在了一起，你可以随时暂停并尝试。

什么情况下我应该使用 Vuex？

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式 (opens new window)就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是：

Flux 架构就像眼镜：您自会知道什么时候需要它。

安装

安装详情请点击

核心概念

什么数据可以储存在vuex：1，果一个数据，需要在多个组件中重复使用，
可以把数据存放在vue的store中
2，用户数据
购物车数据

state

state也可以简称为数据定义数据的使用
state 存储在 Vuex 中的数据和 Vue 实例中的 data 遵循相同的规则，例如状态对象必须是纯粹 (plain) 的。参考：Vue#data。
Vuex 通过 Vue 的插件系统将 store 实例从根组件中“注入”到所有的子组件里。且子组件能通过 this.$store 访问到。使用方法如下：

export default new Vuex.Store({
  //定义数据使用
  state: {
	  shappNum:10
  },
  getters: {
  },
  mutations: {

  },
  actions: {
	 
  },
  modules: {
  }
})

使用在组件中里面的数据源渲染到页面

{{$store.state.shappNum}}

Getters

Getter中现有数据计算出新的数据

 getters: {
	  //从现有数据计算新数据
	  fee:function(state){
		  return state.shappNum*0.5
	  }

Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值：store.getters.xxx

{{$store.getters.fee}}

注意，getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的。

通过方法访问

你也可以通过让 getter 返回一个函数，来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用。
注意，getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。

Mutations

Mutations 定义修改数据的方法
//修改state数据必须在这里的方法
//方法名建议大写

mutations:{
   STE_CART_NUM:function(state,data){
    state.cartNum = data;
  }
}

在组件中访问mutations的方法$store.commit(‘SET_CART_NUM’,100)

在这里插入图片描述

Actionc

Action 类似于 mutation，不同在于：

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

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。当我们在之后介绍到 Modules 时，你就知道 context 对象为什么不是 store 实例本身了。

你在组件中使用 this.$store.dispatch(‘xxx’) 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）：

export default new Vuex.Store({
 //定义数据使用
 state: {
     shappNum:10
 },
 getters: {
     //从现有数据计算新数据
     fee:function(state){
   	  return state.shappNum*0.5
     }
 },
 mutations: {
     //修改state数据必须在这里的方法
     //方法名建议大写
     SET_SHAPP_NUM(state,data){
   	  state.shappNum=data
     }
 },
 actions: {
     //定义异步，网络延迟等方法
     //只可以调用mutations，不能直接修改state
     // context理解为sto
     getshappNum(context){
   	  //可以执行网络请求，等待哦延迟
   	  setTimeout(()=>{
   		  context.commit('SET_SHAPP_NUM',1);
   	  },4000)
     }
 },
 modules: {
 }
})