vue vuex

1.vuex 是一个专门为vue.js应用程序开发的状态管理模式（ 一般由 main.js 引入，是全局数据：用于组件间通信的 共享数据）

2. 关键对象

state：存储状态（变量）/ 状态树 （包含所有需要共享的资源）

getters：对数据获取之前的再次编译（简化原始状态数 state），可以理解为state的计算属性 （也可以直接操作 state 搞成一个计算属性 ）

mutations：修改状态，并且是同步的。在组件中使用$store.commit('',params)。  （更改 Vuex 的 store 中的状态的唯一方法是提交 mutation）

actions：异步操作。在组件中使用是$store.dispath('') 。  （action 的作用跟mutation的作用是一致的，提交mutation，从而改变state）

 

actions 类似于 mutation，不同在于：

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

 

3. 脚手架环境

vue init webpack app

cd app   

npm install vuex --save

npm run dev

src目录下创建一个vuex文件夹，vuex文件夹下新建一个store.js文件

4. 关键代码

入口文件 main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex/store' // 引入store

Vue.config.productionTip = false

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

状态管理配置文件 store.js  （当代码量大时，可以分别写个.js文件再引入，如 state.js）

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

Vue.use(Vuex)

const state = {
    count: 0
}

const mutations = {
    mutationsAddCount:(state, n = 0) => {
        return state.count += n
    },
    mutationsReduceCount(state, n = 0) {
        return (state.count -= n)
    }
}

const actions = {
    actionsAddCount(context, n = 0) {
        console.log(context)
        return context.commit('mutationsAddCount', n)
    },
    actionsReduceCount({ commit }, n = 0) {
        return commit('mutationsReduceCount', n)
    }
}


const getters = {
    getterCount(state) {
        return state.count
    }
}

export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})

实例组件 HelloWorld.vue

<template>
  <div class="hello">
    <h3>{{$store.state.count}}</h3>
    <div>
      <button @click="handleAddClick(10)">增加</button>
      <button @click="handleReduceClick(10)">减少</button>
    </div>

    <div>异步操作</div>
    <div>
      <button @click="handleActionsAdd(20)">异步增加</button>
      <button @click="handleActionsReduce(20)">异步减少</button>
    </div>
    <h4>{{myCount}}</h4>
  </div>
</template>

<script>
export default {
  methods: {
    handleAddClick(n) {
      this.$store.commit("mutationsAddCount", n);
    },
    handleReduceClick(n) {
      this.$store.commit("mutationsReduceCount", n);
    },
    handleActionsAdd(n) {
      this.$store.dispatch("actionsAddCount", n);
    },
    handleActionsReduce(n) {
      this.$store.dispatch("actionsReduceCount", n);
    }
  },
  computed: {
    myCount() {
      return this.$store.getters.getterCount+10;
    }
  }
};
</script>

<style>
</style>

4.1   import { mapState, mapMutations, mapActions, mapGetters } from "vuex";   版本

HelloWorld.vue

<template>
  <div class="hello">
    <h3>{{mapCount}}</h3>
    <div>
      <button @click="handleAddClick(10)">增加</button>
      <button @click="handleReduceClick(10)">减少</button>
    </div>

    <div>异步操作</div>
    <div>
      <button @click="handleActionsAdd(20)">异步增加</button>
      <button @click="handleActionsReduce(20)">异步减少</button>
    </div>
    <h4>{{getterCount}}</h4>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
export default {
  methods: {
    ...mapMutations({
      handleAddClick: "mutationsAddCount",
      handleReduceClick: "mutationsReduceCount"
    }),
    ...mapActions({
      handleActionsAdd: "actionsAddCount",
      handleActionsReduce: "actionsReduceCount"
    })
  },
  computed: {
    //获取store里面的state值到本地
    ...mapState({
      mapCount: state => state.count
    }),
    //获取store中的getter值
    // ...mapGetters({
    //   getterCount: 'getterCount' 
    // })
    ...mapGetters(['getterCount'])
  }
};
</script>

<style>
</style>

 

5. 参考链接

vuex 中文版

export  、 export default  区别