在vue项目里面使用vuex

在vue项目里面使用vuex

1. 先下载vuex
   npm install vuex --save-dev
2. 安装成功之后在 vue项目的目录建立store文件夹
   
3. 在main.js文件里面引入store.js文件

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/store'

Vue.config.productionTip = false

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

4. store.js

   结构

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

Vue.use(Vuex)

const state = {
   
}

const  getters = {
   
}

const  mutations = {
   
}

const  actions = {
   
}

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

• state ： 放数据的地方
• getters ： 用于对store中的数据进行加工处理形成新的数据，getter不会修改state里面的原数据
• mutations： 用于变更state中的数据，只用于同步的操作
• actions： 通过异步操作变更数据，而不能使用mutation，但是在action中还是要通过出发mutation的方式间接的变更数据

简单的例子

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

Vue.use(Vuex)

const state = {
    count:0
}
// Getter 用于对store中的数据进行加工处理形成新的数据，getter不会修改state里面的原数据，
// ① Getter可以对Store中已有的数据加工处理之后形成新的数据，类似Vue的计算属性
// ② Store 中数据发生变化，Getter的数据也会跟着发生变化
const getters = {
    showNum(state){
        return '当前最新的数量是['+state.count +']'
    }
}

// 用于变更store中的数据
const mutations = {
    // 不能在mutations里面写异步操作
    changeAdd(state){
        state.count++
    },
    // step:外界传来的参数
    changeAddN(state,step){
        state.count += step
    },
    changeJian(state){
        state.count--
    },
    changeJianN(state,step){
        state.count -= step
    },
}
// 如果通过异步操作变更数据，不惜通过action 而不能使用mutation，
// 但是在action中还是要通过出发mutation的方式间接的变更数据
const actions = {
    changeAddAsync(context){
        setTimeout(() => {
            context.commit('changeAdd')
        },1000)
    },
    changeAddNAsync(context,step){
        context.commit('changeAddN', step)
    },
    changeJianAsync(context){
        setTimeout(() => {
            context.commit('changeJian')
        },1000)
    },
    changeJianNAsync(context,step){
        setTimeout(() => {
            context.commit('changeJianN',step)
        },1000)
    }
}

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

4. 使用
   a.vue

<template>
  <div class="hello">
    
    <p>当前最新的count值为：{{$store.state.count}}</p>
    <p>{{$store.getters.showNum}}</p>
    <button @click="add">+1</button>
    <button @click="add3">+1 Async</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  created(){
  },
   // 触发mutation
  methods:{
     // 触发mutations的第一种方法
    add(){
      // this.$store.commit('changeAdd')
      // commit 的作用就是调用某个mutation的方法
      this.$store.commit('changeAddN',3)
    },
    // 异步的让count+1
    add3(){
      // dispatch专门触发action
      // this.$store.dispatch('changeAddsync')
      this.$store.dispatch('changeAddNAsync',2)
    }
  },
  computed:{
  }
}
</script>

<style scoped>

</style>

b.vue

<template>
  <div class="hello">
    
    <p>当前最新的count值为：{{count}}</p>
    <p>{{showNum}}</p>
    <button @click="jian">-1</button>
    <button @click="jianN">-n</button>
    <button @click="jianAsync">-1 Async</button>
    <button @click="jianNAsync">-n Async</button>

  </div>
</template>

<script>
// 1. 从vuex中暗血导入mapMutations函数
import { mapState, mapMutations, mapActions, mapGetters} from 'vuex'
export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  created(){
  },
  methods:{
    // 2. 将指定的mutations函数，映射为当前组建的methods函数
    ...mapMutations(['changeJian','changeJianN']),

    ...mapActions(['changeJianAsync','changeJianNAsync']),
    jian(){
      this.changeJian()
    },
    jianN(){
      this.changeJianN(3)
    },
    jianAsync(){
      this.changeJianAsync()
    },
    jianNAsync(){
      this.changeJianNAsync(4)
    }
  },
  computed:{
    ...mapState(['count']),
    ...mapGetters(['showNum'])
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>