VUE之vuex状态管理器

vuex应用场景：Vuex用于组件之间的传值

永久性：当用户刷新页面时vuex存储的值会丢失

安装命令：npm install vuex --save

vuex一般在Vue项目中src文件夹下面创建一个store文件，在store文件夹下面会创建一个index.js文件

index.js文件的大体内容为：

import Vue from 'vue'
import Vuex from 'vuex'
//挂载Vuex
Vue.use(Vuex)
//创建VueX对象
const store = new Vuex.Store({
  //state定义属性
  state: {
    count: 0,
  },
  //只有mutations才能变更store中的数据,不能在mutations函数中执行异步操作
  mutations: {
    addition(state) {
      state.count++
    },
    addition2(state, step) {
      state.count += step
    },
    subtraction(state) {
      state.count--
    },
    subtraction2(state, step) {
      state.count -= step
    }
  },
  //actions用于异步操作，但是在action中要通过触发mutation的方式来变更数据
  actions: {
    addAsync(context) {
      setTimeout(() => {
        context.commit('addition')//addition是mutations中的函数
      }, 1000)
    },
    addAsync2(context, step) {
      setTimeout(() => {
        context.commit('addition2', step)//addition是mutations中的函数
      }, 1000)
    },

    subAsync(context) {
      setTimeout(() => {
        context.commit('subtraction')//addition是mutations中的函数
      }, 1000)
    },
    subAsync2(context, step) {
      setTimeout(() => {
        context.commit('subtraction2', step)//addition是mutations中的函数
      }, 1000)
    },
  },
  //getters 不会修改state里面是数据,获取最新的数据
  getters:{
    shownum(state){
      return '当前最新的值为【'+state.count+'】'
    }
  }
})

export default store

然后在main.js文件中引入store

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'//引入store文件夹下面的index.js
Vue.config.productionTip = false
new Vue({
  el: '#app',
  router,
  store,//将store放在Vue的实例中
  render: h => h(App)
})

这样在Vue文件中就可以使用vuex了

Vuex的核心概念有以下几个

state：定义属性
getters：不会修改state里面是数据,获取最新的数据
mutations：只有mutations才能变更store中的数据,不能在mutations函数中执行异步操作
actions：用于异步操作，但是在action中要通过触发mutation的方式来变更数据

相关写法已在上面的代码按钮中

下面来看一下怎么在Vue文件中使用vuex

第一种方式：

<template>
  <div>
    <div>
      <div>第一种方式访问vuex的值 state</div>
      <div>通过this.$store.state.count 访问 count为vuex中state中属性的名称</div>

    </div>
    <span>当前最新的count值为：{{ this.$store.state.count }}</span>

    <div>第一种调用vue中mutations函数的方法this.$store.commit('addition2',2) //addition2函数名称，2是传递的参数</div>
    <button @click="btnadd">+1</button>
    <button @click="butadd2">+n</button>
    <div>vuex异步操作通过this.$store.dispatch('addAsync')addAsync是actions里面的函数</div>
    <div>通过this.$store.dispatch('函数名')触发actions里面的函数</div>
    <button @click="butadd3">+1异步操作不携带参数</button>
    <button @click="butadd4">+n异步操作携带参数</button>
 <div>使用getter的第一种方式this.$store.getters.函数名称</div>
    <div>getter当前最新的值为 {{this.$store.getters.shownum}}</div>
  </div>
</template>
<script>
  export default {
    name: "addition",
    data() {
      return {

      };
    },
    created: function () {

    },
    components: {},
    watch: {},
    mounted: function () {
    },
    methods: {
      btnadd() {
        //this.$store.state.count 访问vuex中属性的值

        this.$store.commit('addition') //调用vuex里面的函数不需要传值
      },
      butadd2() {
        this.$store.commit('addition2',2) //调用vuex里面的函数需要传值
      },
      butadd3(){
          //这个dispatch是触发vuex里面actions的
          this.$store.dispatch('addAsync')
      },
      butadd4(){
        this.$store.dispatch('addAsync2',4)
      }

    }
  }
</script>

<style scoped>

</style>

第二种方式：

<template>
  <div>
    <div>
      <div>第二种方式访问vuex的值</div>
      <div>第一步：引入import {mapState} from 'vuex'</div>
      <div>第二步：在computed计算属性中通过mapState访问想要访问的变量 例如...mapState(['count'])</div>
    </div>
    <span>当前最新的count值为：{{count}}</span>
    <div>
      第二种调用vuex中mutations的函数
      <p>第一步：引入import {mapMutations} from  'vuex'</p>
      <p>第二步：在methods通过...mapMutations(['subtraction']),调用vuex里面的函数</p>
    </div>
    <button @click="subbtn">点击-1</button>
    <button @click="subbtn2">点击-n</button>
    <div>
      第二种调用vuex中actions函数
      <div>第一步引入import {mapActions} from 'vuex'</div>
      <p>第二步：在methods通过...mapActions(['addAsync','addAsync2']),调用vuex里面的函数</p>
    </div>
    <button @click="subbtn3">异步操作-1</button>
    <button @click="subbtn4">异步操作-n</button>
    <div>使用getter的第二种方式
    <p>第一步import {mapGetters} from 'vuex'</p>
      <p>第二步在computed中引用...mapGetters(['函数名称']),中引用</p>
    </div>
    <div>当前最新的值getter为：{{shownum}}</div>
  </div>
</template>
<script>
  import {mapState,mapMutations,mapActions,mapGetters} from 'vuex'
  export default {
    name: "subtraction",
    data() {
      return {};
    },
    computed: {
      ...mapState(['count']),//mapState映射
      ...mapGetters(['shownum']),
    },
    created: function () {

    },
    components: {},
    watch: {},
    mounted: function () {

    },
    methods: {
      ...mapMutations(['subtraction','subtraction2']),
      ...mapActions(['subAsync','subAsync2']),
      subbtn(){
         this.subtraction();
      },
      subbtn2(){
          this.subtraction2(3)
      },
      subbtn3(){
        this.subAsync();
      },
      subbtn4(){
        this.subAsync2(4);
      }

    }
  }
</script>

<style scoped>

</style>