vue中vuex的简单使用 (原创)

vue中vuex的简单使用

一、vuex是什么？

vuex集中式组件状态(数据)的存储方案，详见官网文档：https://vuex.vuejs.org/zh/

二、vuex中的基本概念

Vuex.Store({

state, //状态数据

getters,//state的延生状态，可以认为是state数据的简单过滤或计算返回

actions,// 动作，actions中的方法可以包含多个异步操作

mutations//突变, mutations中的方法仅支持同步操作

})

三、简单案例

（

注意：

项目中安装vuex组件

 cnpm install vuex --save

全局配置Vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

）

1、store.js

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

Vue.use(Vuex);

//声明state数据
const state={
  number:1
}

//由state派生出的一些状态 用getters表示
const  getters={
  evenOrOdd(state){
    return state.number %2 ==0 ?'偶数':'奇数'
  }
}


// 相当于controller层,其中的方法可以包含多个异步操作
const actions={
  increment(context){
    context.commit('inc');
  },
  decrement({commit}){
    commit('decr');
  }
}

//对数据的操作  相对于dao层，方法中只能含同步操作
const mutations={
  inc(state){
    state.number++;
  },
  decr(state){
    state.number--;
  }
}

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

});

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'

import App from './App'
import router from './router/router.js'
import store from './store/store.js'


Vue.config.productionTip = false


//Vue1.0的写法
// new Vue({
//   el: '#app',
//   router, //在main.js的顶层Vue实例中挂载router （全局）
//   store, // 在main.js的顶层Vue实例中挂载store （全局）

//   components: { App },
//   template: '<App/>'
// })

//Vue2.0的写法
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

3、App.vue

<template>
  <div>
    <p>Current Number {{number}} is {{evenOrOdd}}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script>
  import {mapState,mapGetters,mapActions} from 'vuex'
  export default {
    name: 'App',
    computed:{

      //简化了书写 this.$store.state.number
      //简化了书写 this.$store.getters.evenOrOdd
      ...mapState(['number']),
      ...mapGetters(['evenOrOdd'])
    },
    methods:{
      //简化了书写  this.$store.dispatch('action中的方法名', 额外的载荷对象)
      ...mapActions(['increment','decrement'])
    },

  }
</script>

<style scoped>

</style>