Vuex详解

vuex概念

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

什么是状态管理

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})
  • state,驱动应用的数据源;
  • view,以声明方式将 state 映射到视图;
  • actions,响应在 view 上的用户输入导致的状态变化。

state

state

导出:

//state.js
let state = {
  count: 1,
  name: 'dkr',
  sex: '男',
  from: 'china'
}
export default state

接收:

<template>
  <div id="example">
    <button @click="decrement">-</button>
    {{count}}
    {{dataCount}}
    <button @click="increment">+</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      dataCount: this.$store.state.count //用data接收
    }
  },
  computed:{
    count(){
      return this.$store.state.count //用computed接收
    }
  }
  methods: {
    increment () {
      this.$store.commit('increment')
    },
    decrement () {
      this.$store.commit('decrement')
    }
  }
}
</script>

mapState

当一个组件需要获取多个状态的时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性。

// 在单独构建的版本中辅助函数为 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
    }
  })
}

...mapState

mapState 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢?通常,我们需要使用一个工具函数将多个对象合并为一个,以使我们可以将最终对象传给 computed 属性。但是自从有了对象展开运算符,我们可以极大地简化写法:

    let MapState = mapState({
          count: 'count',
          sex: (state) => state.sex
        })
        let json = {
          'a': '我是json自带的',
          ...MapState
        }
        console.log(json)

这里的json可以成功将mapState return的json格式,和json自带的a属性成功融合成一个新的对象.你可以将这个称为对象混合

Getters

getters

vuex中的getters用于对state中存储的数据进行过滤操作。

//store\store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
 
export default new Vuex.Store({
	//创建一个对象来保存应用启动时的初始状态
	state:{
		 // 应用启动时, count置为0
		count:0,
		todos: [
			{ id: 1, text: '水果类', done: true },
			{ id: 2, text: '苹果', done: true },
			{ id: 3, text: '苹果', done: false}
	    ]
	},
	getters: {
		doneTodos: state => {//通过方法访问
		  return state.todos.filter(todo => todo.done)
		},
		doneTodosCount: (state, getters) => {//通过属性访问
    		return getters.doneTodos.length
  		}
	}
})
//vueDemo.vue
<template>
    <div>
        <P>通过属性访问:{{doneTodosCount}}</p>
        <P>通过方法访问:{{todos}}</p>
    </div>
</template>
 
<script>
/*
1.mapState 辅助函数
当映射的计算属性的名称与 state 的子节点名称相同时,
我们也可以给 mapState 传一个字符串数组
*/
import { mapState } from 'vuex'
export default {
	computed:{
		todos:function() {  //通过方法访问
            return this.$store.getters.doneTodos;
        },
        doneTodosCount () {
		    return this.$store.getters.doneTodosCount
		}
	}
}
</script>

mapGetters

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性

<template>
    <div>
        <h4>测试1:Count is {{count}}</h4>
        <P>通过属性访问:{{doneTodosCount}}</p>
        <P>通过方法访问:{{doneTodos}}</p>
    </div>
</template>
<script>
import {mapGetters} from 'vuex'
export default {
	computed:{
		count(){
		    return this.$store.state.count
		},
		...mapGetters([
			'doneTodos',
			'doneTodosCount'
		])
	}
}
</script>

Mutations

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

 const store = new Vuex.Store({
    state: {
        count: 1
        },
    mutations: {
    increment (state) {      //注册事件,type:increment,handler第一个参数是state;
         // 变更状态
       state.count++}}})
       
    store.commit('increment')   //调用type,触发handler(state)    

**载荷(payload):**简单的理解就是往handler(stage)中传参handler(stage,pryload);一般是个对象。

mutations: {
 increment (state, n) {
     state.count += n}}
 store.commit('increment', 10)

mutation-types:将常量放在单独的文件中,方便协作开发。

// mutation-types.js
 export const SOME_MUTATION = 'SOME_MUTATION'
 
 
// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'

  const store = new Vuex.Store({
    state: { ... },
    mutations: {
     // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
    [SOME_MUTATION] (state) {
    // mutate state
  }
}
})

Actions

Action 类似于 mutation,不同在于:

  • Action 提交的是 mutation,而不是直接变更状态。
  • Action 可以包含任意异步操作。
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

Modules

Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×