vuex学习--(1)

Vuex 是什么?

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

  单个父子组件的数据绑定可能会简单一点,多个组件之间的数据绑定就比较麻烦了,vuex就是解决这个的

  Vuex 也集成到 Vue 的官方调试工具 devtools extension

  提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

状态管理模式:

    1.store数据源--》对应vue   data

    2.view模板--》对应 vue temolate

    3.actions响应--》对应vue methods函数

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

  开发大型单页应用比较适合用(非简单单页应用)

使用

一、先新建一个store对象

 1.先来一些数据和一个简单的修改数据函数

// 如果在模块化构建系统中,请确保在开头调用了 Vue.use(Vuex)

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

 2.store对象有两个方法

store.commit(‘increment‘) //执行函数

console.log(store.state.count) // -> 1     //state查询\获取

二、将数据源从根组件注入到需要的每一个子组件中(需调用 Vue.use(Vuex)):

1.新建根目录下vue实例,并建立store对象

const app = new Vue({
  el: ‘#app‘,
  // 把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件
  store,
  components: { Counter },  //计数器组件
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})

2.子组件能通过 this.$store访问父组件store对象

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

三、辅助函数mapState

子组件获取到数据后,想返回一个计算出来的值,可以用这个vuex自带的辅助函数

1.假设子组件data里面有一个localCount数据,可以这样用

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from ‘vuex‘

export default {
  // ...
  computed:
    mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 ‘count‘ 等同于 `state => state.count`
    countAlias: ‘count‘,

    // 为了能够使用 `this` 获取局部状态,必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}    //这样就返回了根组件数据count加上子组件数据localCount

 2.当映射的计算属性的名称与 state 的子节点名称相同时,我们也可以给 mapState 传一个字符串数组。

computed: mapState([
  // 映射 this.count 为 store.state.count
  ‘count‘
])

  学习自:https://vuex.vuejs.org/zh-cn/installation.html

时间: 2024-10-27 02:00:16

vuex学习--(1)的相关文章

vuex学习---getters

vue是一个面向数据,只有一个层:view,在数据传给客户端之前,计算其相关的属性,应该是什么样子,前面有个mapState([])远程加载数据,加载的是一个静态的数据,如果想获取动态的数据,就要用到 getters .官方建议在getter和computed不推荐使用箭头函数. 这个例子依旧沿用了之前vuex学习---简介的模板 1.首先在store.js中 一开始会在页面上显示 :104 常量值4+ getters中的100   ;点击加 会104+ 100+3 ,变成207 :点击减207

vuex学习---state访问状态对象

在vuex学习---vuex简介中已经介绍过vuex的简单使用,在这个例子中,沿用以上的模板,介绍一下state访问状态对象的几种写法: <template> <div id="app"> <div id="appaaa"> <h1>这是vuex的示例</h1> <p>调用仓库常量 {{$store.state.count}}</p> <!-- <p>组件内部cou

vuex 学习总结及demo

vuex是vue.js应用程序开发的状态管理模式 它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 官方文档:https://vuex.vuejs.org/zh/ 具体的看官方文档,我在学习vuex的时候  变量名总是弄不清楚  后来一个个实践总算弄明白了  下图同个颜色表示变量名必须一致   希望可以帮助大家更好的理解Vuex 下面是demo连接地址,欢迎大家转载学习: https://github.com/Amelia608/vuex-demo-w

vuex学习笔记

参考地址:https://vuex.vuejs.org/zh-cn/intro.html Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式管理存储管理应用的所有组件的状态,并以相应规则保证状态以一种可预测的方式发生变化 什么是"状态管理模式"? 1 new Vue({ 2 // state 3 data () { 4 return { 5 count: 0 6 } 7 }, 8 // view 9 template: ` 10 <d

Vuex 学习笔记一

一.定义 Vuex是一个专为Vue.js应用程序开发的状态管理模式. 状态管理模式 简单的demo new Vue({ // state data () { return { count: 0 } }, // view template: ` <div>{{ count }}</div> `, // actions methods: { increment () { this.count++ } } }) state,驱动应用的数据源: view,以声明方式将state映射到视图:

vuex学习---modules

除非是非常大的项目,否则不推荐使用modules. //1定义模块组var moduleA = { state, mutations, actions}; //2声明模块组 modules:{ a:moduleA } //3在App.vue中调用 <p>{{$store.state.a.count}}</p> 1.在retore.js import Vue from 'vue' import Vuex from 'vuex' //使用vuex模块 Vue.use(Vuex); //

vuex学习

A  Vuex就类似一个中间件,在state里面定义了状态的数据,比如state={ count:0 },后期用this.$store.state 获取状态,也可用mapState映射过去 B  在mutations 内部定义了改变这个数据的方法,这是一种同步的事物,可用this.store.commit(mutationName)来触发一个方法,也可用mapMutations C  异步的逻辑封装在actions里面,也可用于改变状态,其实也是通过触发mutations实现的,用this.$s

vuex 学习笔记

1.vuex的简单使用方法 安装: cnpm install vuex --save 使用: (1)新建一个store的文件夹 代码例子: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { count: 0 } const mutations = { increment(state) { state.count ++; } } export default new Vuex.Store({ st

vuex学习之路

Vuex理解 vuex是一个专门为vue.js设计的集中式状态管理架构.状态?把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态.简单的说就是data中需要共用的属性.比如:有几个页面要显示用户名称和用户等级,或者显示用户的地理位置.如果不把这些属性设置为状态,那每个页面遇到后,都会到服务器进行查找计算,返回后再显示.在中大型项目中会有很多共用的数据,所以尤大神给我们提供了vuex. 引入vuex 1.利用npm包管理工具,进行安装 vuex.在控制命令行中输入下边的命令