码迷,mamicode.com
首页 > 其他好文 > 详细

vuex学习--(1)

时间:2017-09-07 11:59:32      阅读:125      评论:0      收藏:0      [点我收藏+]

标签:turn   class   str   comm   ted   管理   箭头   字符   map   

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

 

vuex学习--(1)

标签:turn   class   str   comm   ted   管理   箭头   字符   map   

原文地址:http://www.cnblogs.com/szlxb/p/7488689.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!