vuex入门

针对vuex的一些探索尝试，逐步更新中

Vuex 是什么？

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

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

通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。
这就是 Vuex 背后的基本思想，借鉴了 Flux、Redux 和 The Elm Architecture。与其他模式不同的是，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

核心概念

• State：单一状态树
• Getter：可理解为 store 的计算属性
• Mutation：更改状态的唯一方法是提交 mutation
• Action：提交 mutation，并可以包含任意异步操作
• Module：为避免store 对象的臃肿，分割成模块（module），每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块
• mapState, mapGetters, mapActions, mapMutations：辅助函数，当状态对象较多时，会造成代码臃肿和冗余，结合对象展开运算符（...）就可以优雅的使用了

安装使用

安装

npm i --save vuex

新建src/store/index.js文件目录

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    getCount: state => state.count * 10
  },
  mutations: {
    addOne: state => state.count++,
    lessOne: state => state.count--,
    add: function (state, n) {
      state.count += n
    },
    less: function (state, n) {
      state.count -= n
    }
  },
  actions: {
    add: (context, n) => context.commit('add', n),
    less: (context, n) => context.commit('less', n),
    addOne: context => context.commit('addOne'),
    lessOne: context => context.commit('lessOne')
  }
})

export default store

在main.js中引入store，并在vue实例中引用store对象

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>'
})

HelloWorld.vue中添加显示部分

<template>
  <div class="hello">
    <p>count:{{ this.$store.state.count }}</p>
    <p>getCount:{{ this.$store.getters.getCount }}</p>
    <button @click="adder">加十</button>
    <button @click="lesser">减五</button>
    <hr>
    <p>count:{{ count }}</p>
    <p>count:{{ getCount }}</p>
    <button @click="addOne">加一</button>
    <button @click="lessOne">减一</button>
  </div>
</template>

<script>
import {mapState, mapGetters, mapActions, mapMutations} from 'vuex'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    adder () {
      // this.$store.commit('add');
      this.$store.dispatch('add', 10)
    },
    lesser () {
      // this.$store.commit('less');
      this.$store.dispatch('less', 5)
    },
    // ...mapMutations(['addOne', 'lessOne']),
    ...mapActions(['addOne', 'lessOne'])
  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['getCount'])

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

module的用法：

import moduleA from './moduleA'
import moduleB from './moduleB'
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

export default store

<p>count:{{ this.$store.state.a.count }}</p>
<p>count:{{ this.$store.state.b.count }}</p>