vue2生态之vuex

vue2生态之vuex

提示：个人学习和总结，如有错误欢迎指正

---

---

一、安装与使用

1、安装

npm i vuex@3

vue2用的是vuex3

2、使用

新建store文件夹，里面新建index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 1
  },
  getters: {
    bigCount: (state) => state.count * 10
  },
  mutations: {
    ADD(state, n) {
      state.count += n
    }
  },
  actions: {
    addWait(context, n) {
      setTimeout(() => {
        context.commit("ADD", n)
      }, 2000)
    }
  }
})
export default store

main.js

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

app.vue

<template>
  <div>
  Vuex的使用
  <p>{{sum}}+
    <select v-model="selectValue">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
    <button @click="plus">=</button>
    <button @click="addWait">2秒后相加</button>
    {{$store.state.count}}</p>
  <p>count变大十倍是{{$store.getters.bigCount}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sum: 1,
      selectValue:1
    }
  },
  methods: {
    plus() {
      this.$store.commit('ADD',Number(this.selectValue))
    },
    addWait() {
      this.$store.dispatch("addWait", Number(this.selectValue))
    }
  }
}
</script>

二、4个map的使用

1、mapState

import {mapState} from 'vuex'
computed: {
  // 对象写法:新起一个变量名为count1
  ...mapState({count1: 'count'}),
  // 数组写法: 变量名和state里的变量同名，可以简写
  ...mapState(['count']),
}

在app.vue中直接写count就可以

<!-- {{$store.state.count}}</p> -->
{{count}}</p>

2、mapGetters

import {mapGetters} from 'vuex'
computed: {
   ...mapGetters(['bigCount'])
}

app.vue中直接写bigCount就可以

  <p>count变大十倍是{{bigCount}}</p>

3、mapMutations

import {mmapMutations} from 'vuex'
methods: {
	...mapMutations({plus: "ADD"}),
	// 如果click事件和mutations的事件名一样，可以用数组写法，比如名字都是ADD
	...mapMutations(["ADD"]),

mapMutations写法无法传递参数，不写参数，默认传参就是e当前元素。所以在模版click事件里改为传参
app.vue

 <button @click="plus(selectValue)">=</button>
 <button @click="addWait(selectValue)">2秒后相加</button>

4、mapActions

import {mapActions} from 'vuex'
methods: {
    ...mapActions(['addWait']),
 }

完整代码如下：

<template>
  <div>
  Vuex的使用
  <p>{{sum}}+
    <select v-model="selectValue">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
    <button @click="plus(selectValue)">=</button>
    <button @click="addWait(selectValue)">2秒后相加</button>
    <!-- {{$store.state.count}}</p> -->
    {{count}}</p>

  <!-- <p>count变大十倍是{{$store.getters.bigCount}}</p> -->
  <p>count变大十倍是{{bigCount}}</p>
  </div>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
  data() {
    return {
      sum: 1,
      selectValue:1
    }
  },
  computed: {
    // 对象写法:新起一个变量名为count1
    ...mapState({count1: 'count'}),
    // 数组写法: 变量名和state里的变量同名，可以简写
    ...mapState(['count']),
    ...mapGetters(['bigCount'])
  },
  methods: {
    ...mapMutations({plus: "ADD"}),
    // ...mapActions({plusWait: 'addWait'})
    ...mapActions(['addWait']),
    
  }
}
</script>

三、modules的用法

1、直接读取

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const conutAbout = {
  namespaced: true,//开启命名空间
  state: {
    count: 1
  },
  getters: {
    bigCount: (state) => state.count * 10
  },
  mutations: {
    ADD(state, n) {
      state.count += n
    }
  },
  actions: {
    addWait(context, n) {
      setTimeout(() => {
        context.commit("ADD", n)
      }, 2000)
    }
  }
}
const store = new Vuex.Store({
  modules: {
    conutAbout
  }
})
export default store

app.vue

<template>
  <div>
  Vuex的使用
  <p>{{sum}}+
    <select v-model="selectValue">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
    <button @click="plus(selectValue)">=</button>
    <button @click="addWait(selectValue)">2秒后相加</button>
    {{$store.state.conutAbout.count}}</p>
  <p>count变大十倍是{{$store.getters['conutAbout/bigCount']}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sum: 1,
      selectValue:1
    }
  },
  computed: {
  },
  methods: {
    plus() {
      this.$store.commit('conutAbout/ADD',Number(this.selectValue))
    },
    addWait() {
      this.$store.dispatch("conutAbout/addWait", Number(this.selectValue))
    }
  }
}
</script>

2、借助4个map读取数据

<template>
  <div>
  Vuex的使用
  <p>{{sum}}+
    <select v-model="selectValue">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
    <button @click="plus(selectValue)">=</button>
    <button @click="addWait(selectValue)">2秒后相加</button>
  {{count}}</p>
  <p>count变大十倍是{{bigCount}}</p>
  </div>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
  data() {
    return {
      sum: 1,
      selectValue:1
    }
  },
  computed: {
    ...mapState("conutAbout", ['count']),
    ...mapGetters("conutAbout",['bigCount'])
  },
  methods: {
    ...mapMutations("conutAbout",{plus: "ADD"}),
    ...mapActions("conutAbout",['addWait'])
  }
}
</script>