vue中使用vuex(超详细)

vuex中，有默认的五种基本的对象个人理解：

1. state : (初始化数据)
2. getter (输出给外界数据)
3. mutation (定义的方法，必须同步)
4. action (输出给外界方法，可异步)
5. module（每一个js 文件都可以包含state getter mutation action四项，统一进行管理）

下载 npm install vuex --save 以下使用仅是初步使用，如需封装可自行再次封装

使用方式

1.新建一个store.js文件

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state={
    number:0
}
const store=new Vuex.Store({
    state
})
export default store

2.在Main.js文件中引入

import store from 'xxx' //1的新建文件
在new Vue({
    store   //加入上面引用的
})

3.在.vue文件中获取state中的值

created:function(){
    console.log(this.$store.state.number) //this.$store.state.number即可拿到值 输出0
}

4.配合getters使用，回到1

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state={
    nuamber:0
}
const getters={
    newNumber(){//aaNumber名称随意起
        return state.number
    }
}
const store=new Vuex.Store({
    state,
    getters
})
export default store

5.在.vue,通过getters获取数据

created:function(){
    console.log(this.$store.getters.newNumber) //this.$store.getters.newNumber即可拿到值 输出0
}

6.配合mutations ，增加点击事件，改变state 回到4

​
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state={
    number:0
}
const mutations={
    aaNumber(state){//aaNumber名称随意起
        state.number++
    }
}
const getters={
    newNumber(){//aaNumber名称随意起
        return state.number
    }
}
const store=new Vuex.Store({
    state,
    getters,
    mutations
})
export default store

​

7.在.vue文件下，通过mutations改变数据

<template>
  <div id='app'>
      <button @click="a">点击</button>//每次点击将改变下面数据不断累加
      <div>{{this.store.getters.newNumber}}</div>
  </div>
</template>
<script>
export default{
  methods:{
      a(){
          this.$store.commit('aaNumber')
      }
  }
}
</script>

8.使用mapMutations

<template>
  <div id='app'>
      <button @click="a">点击</button>//每次点击将改变下面数据不断累加
      <div>{{this.store.getters.newNumber}}</div>
  </div>
</template>
<script>
import {mapMutations} from 'vuex'
export default{
  methods:{
      ...mapMutations(['aaNumber'])
      a(){
          this.aaNumber()
      }
  }
}
</script>

9.actions请求

​
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state={
    number:0
}
const mutations={
    aaNumber(state){//aaNumber名称随意起
        state.number++
    }
}
const actions={
    aaNumberchange(context){//触发mutation里面函数的方法，context与store实例具体相同方法和属性
        context.commit('aaNumber')
    }
}
const getters={
    newNumber(){//aaNumber名称随意起
        return state.number
    }
}
const store=new Vuex.Store({
    state,
    getters,
    mutations
})
export default store

​

10.actions改变数据

<template>
  <div id='app'>
      <button @click="a">点击</button>//每次点击将改变下面数据不断累加
      <div>{{this.store.getters.newNumber}}</div>
  </div>
</template>
<script>
export default{
  methods:{
      a(){
         this.$store.dispatch('aaNumberchange')
      }
  }
}
</script>

11.modules

在真正用的时候不会只有一个store 基本都会将方法分开，这里在做一个递减器主要为了分开两个文件，新建一个add.js 文件与reduce.js文件。把之前store.js中state、mutations、actions、getters放到add.js 中如图 reduce.js文件一样只是将++改成--

add.js

​
const state={
    number:0
}
const mutations={
    aaNumber(state){//aaNumber名称随意起
        state.number++
    }
}
const actions={
    aaNumberchange(context){//触发mutation里面函数的方法，context与store实例具体相同方法和属性
        context.commit('aaNumber')
    }
}
const getters={
    newNumber(){//aaNumber名称随意起
        return state.number
    }
}
export default {
     namespaced: true, state,mutations,actions ,getters
}

​

reduce.js

​
const state={
    number:0
}
const mutations={
    aaNumber(state){//aaNumber名称随意起
        state.number--
    }
}
const actions={
    aaNumberchange(context){//触发mutation里面函数的方法，context与store实例具体相同方法和属性
        context.commit('aaNumber')
    }
}
const getters={
    newNumber(){//aaNumber名称随意起
        return state.number
    }
}
export default {
     namespaced: true, state,mutations,actions ,getters
}

​

12在store.js文件中引入文件

import Vue from 'vue'
import Vuex from 'vuex'
import aa from 'xx'  //add.js 对应文件路径
import bb from 'xx'  //reduce.js 对应文件路径
Vue.use(Vuex)
export default new Vuex.Store({
    modules:{
      aa,
      bb 
    }
})

13.在.vue文件中进行使用，以及可以使用mapState来获取值

<template>
  <div id='app'>
      <button @click="a">点击</button>//每次点击将改变下面数据不断累加
      <div>{{dataA}}</div> //累加的数据
      <div>{{dataB}}</div> //递减的数据
      <button @click="b">点击</button>//每次点击将改变下面数据不断递减
  </div>
</template>
<script>
 import {mapState}  from 'vuex'
export default{
  computed({
      ...mapState({
              dataA(state){
                  return state.aa.number //累加的数据
              },
            dataB(state){
                  return state.aa.number //递减的数据
              },
           //或者 data:state=>state.aa.number ES6  累加的数据
      })
  })
  methods:{
      a(){
         this.$store.dispatch('aa/aaNumberchange') //aa 表示12  modules中
      },
      b(){
         this.$store.dispatch('bb/aaNumberchange') //bb同上
      }
  }
}
</script>

14.通过mapGetters来取值，取的是getter的方式

<template>
  <div id='app'>
      <button @click="a">点击</button>//每次点击将改变下面数据不断累加
      <div>{{dataA}}</div> //累加的数据
      <div>{{dataB}}</div> //递减的数据
      <button @click="b">点击</button>//每次点击将改变下面数据不断递减
  </div>
</template>
<script>
 import {mapGetters}  from 'vuex'
export default{
  computed({
      ...mapGetters({
          dataA:'aa/newNumber',
        dataB:'bb/newNumber'
      })
  })
  methods:{
      a(){
         this.$store.dispatch('aa/aaNumberchange') //aa 表示12  modules中
      },
      b(){
         this.$store.dispatch('bb/aaNumberchange') //bb同上
      }
  }
}
</script>

15.mapActions 代替this.$store.dispatch()

<template>
  <div id='app'>
      <button @click="a">点击</button>//每次点击将改变下面数据不断累加
      <div>{{dataA}}</div> //累加的数据
      <div>{{dataB}}</div> //递减的数据
      <button @click="b">点击</button>//每次点击将改变下面数据不断递减
  </div>
</template>
<script>
 import {mapGetters,mapActions}  from 'vuex'
export default{
  computed({
      ...mapGetters({
          dataA:'aa/newNumber',
        dataB:'bb/newNumber'
      })
  })
  methods:{
    ...mapActions({a:'aa/aaNumberchange'},{b:'bb/aaNumberchange'})  //a b是方法
  }
}
</script>