Vuex的简单用法

1、安装vuex

npm i vuex

2、在main.js里进入并且使用vuex

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

3、在src文件目录下创建store目录，目录下创建store.js文件

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex);export default new Vuex.Store({  state: {     },  mutations: {    },  getters:{     },   actions: {}})

4、需要在main.js配置

import store from './store/store'
new Vue({  store,  render: h => h(App)}).$mount('#app');

5、接下来分析vuex中各项模块的功能

• state

  vuex中的数据源，我们需要保存的数据就保存在这里，可以在页面通过 this.$store.state来获取我们定义的数据；
  store.js

  	export default new Vuex.Store({
    	state: {    count: 0,    data:[],    num:[1,2,4]  },})
  

  view.vue

  	<template> <p>{{count}}</p>
   	<p>{{num}}</p>
   	</template><script>import { mapState,mapGetters,mapMutations } from 'vuex'//这里是使用了辅助函数，分别对应state、getters、mutations.computed:{     ...mapState(['num']) , //...是es6的拓展符，这样可以直接访问到num.     count(){     return this.$store.state.count //也可以用这种方法     },}</script>
  

• mutations

  如果需要修改state中的值唯一的方法就是提交mutation来修改.
  store.js

  export default new Vuex.Store({ 
  	mutations: {    increment: state => state.count++,    decrement: state => state.count--,    get: state => console.log(state.data),    ff(state, b) {      console.log(state.count+=b)    }  },})
  

  view.vue

  <template>
  	<button @click="increment">+</button>     <button @click="decrement">-</button>     <button @click="get">get</button>     <button @click="ff">+10</button>
  </template>
  
  <script>
  	methods:{
  		increment(){this.$store.commit('increment')}, ff(){this.$store.commit('ff',10)},decrement(){this.$store.commit('decrement')  }, get(){this.$store.commit('get')}
  	}
  </script>
  

• getters

  就是从state中派生出状态，比如将state中的某个状态进行过滤然后获取新的状态
  store.js

  export default new Vuex.Store({
  	getters:{filter(state) {const a=state.num.length; for (let i = 0; i < a; i++) {         if (state.num[i] < 3) {           console.log(state.num[i]) } }}  },})
  

  view.vue

  <template>
  	<p @click="getter">getters</p>
  </template>
  <script>
  	methods:{
  	      getter(){this.$store.getters.filter;},
  	}
  </script>
  

• actions

  actions就是mutation的加强版，它可以通过commit mutations中的方法来改变状态，最重要的是它可以进行异步操作。
  store.js

    
  export default new Vuex.Store({
   	actions: {       asyncInrement(context) {         return new Promise(resolve => {           setTimeout(() => {             context.commit('increment');             resolve();           }, 1000)         });       }      }
  })
  

  view.vue

    
  <template>
   	<button @click="action">+1</button>
  </template>
  <script>
  	methods:{
  	      action() {          this.$store.dispatch('asyncInrement').then(() => {          console.log(this.$store.state.count);      })},
  	}
  
  </script>
  

6、module模块

项目比较复杂的时候，数据全部写在一个state ，将会使我们的文件显得太过于臃肿，而且不易维护，那怎么办呢？
vuex为我们提供了module这样一个模块的概念。

store.js

const moduleA = {
  state: { /*data**/ },
  mutations: { /**方法**/ },
  actions: { /**方法**/ },
  getters: { /**方法**/ }
}

const moduleB = {
  state: { /*data**/ },
  mutations: { /**方法**/ },
  actions: { /**方法**/ }
  getters: { /**方法**/ }
}

export default new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

//在模块内部使用
state.count //这种使用方式和单个使用方式样，直接使用就行

//在组件中使用
store.state.a.count //先找到模块的名字，再去调用属性
store.state.b.count //先找到模块的名字，再去调用属性

view.vue

<template>
    <p @click="get"></p>
</template>
<script>
    methods:{
    get(){
        this.$store.state.a.count
        }
}

</script>

相关链接