vuex的使用总结

1.简单使用

目录结构如下图所示：

vuex的使用总结

用vue-cli新建一个vue项目，引入vuex，执行：

cnpm n install vuex --save

需要注意的是这里一定要加上 –save，因为你这个包我们在生产环境中是要使用的。

在src文件夹下即与component同级新建一个文件夹vuex，在文件夹下新建store.js，新建文件夹不是必须的。

并在store.js中引入vue,vuex，并且使用

    import Vue from 'vue';
    import Vuex from 'vuex';
    Vue.use(Vuex);

到此，vuex就引入成功了，接下来我们开始简单操作

具体概念细节请参见官网：

贴出store.js中代码（均为测试代码）：

import Vue from 'vue';
import Vuex from 'vuex';//数据仓库

Vue.use(Vuex);

const state = {//状态
  count : 1,
}

const getters = {
  count: state => state.count
}

const mutations = {//改变状态对象同步
  add(state , num){//第一个参数state默认，第二个是传递的参数
    state.count += num;
  },
  reduce(state){
    state.count --;
  },
}

const actions = {//改变状态对象异步
  addAction(context){
    context.commit('add' , 10);
    setTimeout(() => {
      context.commit('reduce')
    },5000);
    console.log('我比reduce先执行了')
  },
  reduceAction({commit}){
    commit('reduce')
  }
}

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

使用vuex的模块代码：

<template>
  <div>
    <h2>{{msg}}</h2><hr>
    <h3>{{count}}</h3>
    <p>
      <button @click="add(100)">+</button>
      <!-- 使用commit方式触发事件的第一个参数时函数名，后面的参数是传递的参数 -->
      <button @click="reduce">-</button>
    </p>
    <p>
      <button @click="addAction">+</button>
      <!-- 使用commit方式触发事件的第一个参数时函数名，后面的参数是传递的参数 -->
      <button @click="reduceAction">-</button>
    </p>
  </div>
</template>

<script>
import store from '@/vuex/store.js'
import {mapState , mapGetters , mapMutations , mapActions} from 'vuex'
export default {
  data(){
    return {
      msg: 'hello world'
    }
  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['count'])
  },
  methods:{
    ...mapMutations(['add' , 'reduce']),
    ...mapActions(['addAction' , 'reduceAction']),
  },
  store,
}
</script>

2.复杂使用

目录结构如下图所示：

vuex的使用总结

复杂使用是将store.js拆开分为state.js,getters.js等文件

store.js中代码为，将各js文件引入并暴露接口：


import Vue from 'vue'
import VueX from 'vuex'

Vue.use(VueX);

import mutations from './mutations'
import actions from './actions'
import getters from './getters'
import state from './state'

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

此种方式是在全局挂载使用vuex，我们需要在main.js中配置：

import Vuex from 'vuex'
import store from './store/store'
Vue.use(Vuex)
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

这样我们在各模块中不需要再次引入store，直接引入mapState这样的模块即可，如下图所示

vuex的使用总结

注：复杂使用只是简单使用的变种，遇到了不必害怕，万变不离其宗！多参考官方文档。

本媛之前就对vuex有多少了解，之前应该分开写踩了不少坑，从头开始看了下技术胖的视频，很有帮助。

本篇是看完技术胖vuex视频进行编写。

参见：http://jspang.com/post/vuex.html

1.简单使用

2.复杂使用

相关推荐