vue相关的---Vuex

vuex的原理图

安装：

npm i vuex安装的就是vue3的版本vuex4,vuex4只能在vue3中使用；所以如果时vue2使用的话，需下载vuex3版本，在终端中输入命令npm i vue@3
使用vuex： 

首先在src文件夹下新建store文件夹，

store文件夹中创建index.js文件，内容如下，

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入store
import store from './store'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
	el: '#app',
	render: h => h(App),
	// store:'store'
	//可以简写：,所以VM和VC中都有$store
	store
})

main.js中内容如下

Index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const actions = {
}

//准备mutations-用于操作数据（state）
const mutations = {
}
//准备state-用于存储数据
const state = {
}
const getters = {
}

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

小案例，实现效果：

代码：(main.js、store(index.js)、Count.vue、APP.vue)

main.js同上

index.js

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

const actions = {
    /* jia(context, value) {
        context.commit('JIA', value)
    },
    jian(context, value) {
        context.commit('JIAN', value)
    }, */
    jiaOdd(context, value) {
        if (context.state.sum % 2) {
            context.commit('JIA', value)
        }
    },
    jiaWait(context, value) {
        setTimeout(() => {
            context.commit('JIA', value)
        }, 500);
    },

}

//准备mutations-用于操作数据（state）
const mutations = {
    JIA(state, value) {
        state.sum += value
    },
    JIAN(state, value) {
        state.sum -= value
    },
}
//准备state-用于存储数据
const state = {
    sum: 0,
    school: 'henan',
    subject: 'physical'
}
const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

App.vue:

<template>
	<div>
		<Count/>
	</div>
</template>

<script>
import Count from './components/Count';
export default {
	name:'App',
	components:{Count},
}
</script>

Count.vue:

<template>
  <div>
    <!-- <h1>当前求和为：{{ $store.state.sum }}</h1> -->
    <h1>当前求和为：{{ sum }}</h1>
    <!-- <h1>当前求和为：{{ $store.getters.bigSum}}</h1> -->
    <h1>当前求和为：{{ bigSum}}</h1>
    <!-- <h3>我在{{$store.state.school}}，学习{{ $store.state.subject }}</h3> -->
    <h3>我在{{school}}，学习{{ subject }}</h3>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">当前求和为奇数再加</button>
    <button @click="incrementWait">等一等再加</button>
  </div>
</template>

<script>
import { mapState,mapGetters } from 'vuex';
export default {
  name:'Count',
  data(){
    return {
      n:1,
    }
  },
  computed:{
    //借助mapState生成计算属性，从state中读取数据（对象写法）
    // ...mapState({he:'sum',xuexiao:'school',xueke:'subject'})
    //借助mapGetter生成计算属性，从getters中读取数据（数组写法）
    ...mapState(['sum', 'school', 'subject']),
    ...mapGetters(['bigSum'])
  },
  methods:{
    increment(){
      this.$store.commit('JIA', this.n)
    },
    decrement(){
      this.$store.commit('JIAN', this.n)
    },
    incrementOdd(){
      if(this.$store.state.sum % 2){
        this.$store.dispatch('jiaOdd', this.n)
      }
    },
    incrementWait(){
      this.$store.dispatch('jiaWait', this.n)
    },
  },
  mounted(){
    // const x = mapState({he:'sum',xuexiao:'school',xueke:'subject'})
    // console.log(x);
  }
}
</script>

<style>
button {
  margin-left: 20px;
}
</style>