Vue vuex的使用

前言

vuex就相当于一个本地存储一样，是用来集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，vuex中有四种属性，state 、mutations、getters、actionc、modules四种属性。
state是用来定义公共数据的，mutations是同步定义的方法，actionc相当于异步请求，modules拆分模块，代码如下。

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

    Vue.use(Vuex)

    export default new Vuex.Store({
        //定义公共数据
      state: {
      },
      mutations: {
      },
      actions: {
      },
      modules: {
      }
    })

vuex模块化

首先先讲vuex拆分开要用到modules，要创建一个文件夹将state，mutations，actions抛出，引入到vuex中。

抛出引入到vuex中

export default {
    state: {
        count:10,
      },
      mutations: {
        addfn(state,val){
            state.count += val
        }
      },
      actions: {
        addfnaction({commit},val){
          commit('addfn',val)
        }
      },
      namespaced:true
}

引入vuex，将值放到modules属性里面,vuex的简单拆分就完成了！

import Vue from 'vue'
import Vuex from 'vuex'
import user from './user/index'
Vue.use(Vuex)

export default new Vuex.Store({
 
  modules: {
    user
  },
})

接下来在state属性中定义值（任意类型）

export default {
    state: {
        // 定义number类型 count
        count:10,
      },
      mutations: {
        addfn(state,val){
            state.count += val
        }
      },
      actions: {
        addfnaction({commit},val){
          commit('addfn',val)
        }
      },
      namespaced:true
}

取vuex中的值

在页面中拿到在vuex中定义的值有两种方法，第一种就是直接用 this.$store.user.count然而另一种需要在页面中的计算属性computed,代码如下。

<template>
    <div>
        {{number}}
    </div>
</template>
<script>
//引入
import {mapState} from 'vuex'
export default {
    data(){
        return{
        }
    },
    //取值
    computed: {
    ...mapState({
      //箭头函数方便简介推荐使用
      number: (state) => state.user.count,
    }),
  },
}
</script>
<style lang="less"></style>

vuex中的三种存之方式

如果想要设置vuex中的值有三种设置的方法，设置的值知识短暂的，如果想要在不关闭浏览器的情况下值不变需要在项目里下载持久化插件。

第一种同步存值方式

首先看一下vuex中去如何拿到页面中的值，代码如下

export default {
    state: {
        // 定义number类型 count
        count:10,
      },
      mutations: {
      //在mutations中定义方法接受传过来的值
      //第一个值是监听state属性，第二个值是接受过来的值
        addfn(state,val){
            state.count = val
        }
      },
      actions: {
        addfnaction({commit},val){
          commit('addfn',val)
        }
      },
      namespaced:true
}

在页面上需要使用commit去传到vuex中,commit的第一个属性是我在vuex中方法的名字，第二个名字是我传过去的值

<template>
    <div>
        {{number}}
        <button @click="btn">one</button>
    </div>
</template>
<script>
//引入
import {mapState} from 'vuex'
export default {
    data(){
        return{
        }
    },
    //取值
    computed: {
    ...mapState({
      //箭头函数方便简介推荐使用
      number: (state) => state.user.count,
    }),
  },
 methods: {
     //将数据传递到我vuex中的方法里面
     btn(){
         this.$store.commit("user/addfn", 100);
     }
 },
</script>
<style lang="less"></style>

第二种同步存值方式

vuex中用的方法就有一些不一样了，需要在actions中定义方法

export default {
    state: {
        // 定义number类型 count
        count:10,
      },
      mutations: {
      //在mutations中定义方法接受传过来的值
      //第一个值是监听state属性，第二个值是接受过来的值
        addfn(state,val){
            state.count = val
        }
      },
      //传过来的属性名 第一个参要用{}包裹第二个是属性值
      actions: {
        addfnaction({commit},val){
          commit('addfn',val)
        }
      },
      namespaced:true
}

页面中需要使用dispatch去传到vuex中,dispatch的第一个属性是我在vuex中方法的名字，第二个名字是我传过去的值

<template>
    <div>
        {{number}}
        <button @click="btn">one</button>
    </div>
</template>
<script>
//引入
import {mapState} from 'vuex'
export default {
    data(){
        return{
        }
    },
    //取值
    computed: {
    ...mapState({
      //箭头函数方便简介推荐使用
      number: (state) => state.user.count,
    }),
  },
 methods: {
     //将数据传递到我vuex中的方法里面
     btn(){
         this.$store.dispatch("user/addfn", 100);
     }
 },
</script>
<style lang="less"></style>

第三种异步存值方式

vuex中的方法和第二种同步存值是基本一样的只是存值的方式变了，在页面中需要引入mapActions，代码如下。

<template>
    <div>
        {{number}}
        <button @click="btn">one</button>
    </div>
</template>
<script>
//引入
import {mapState} from 'vuex'
export default {
    //取值
    computed: {
    ...mapState({
      //箭头函数方便简介推荐使用
      number: (state) => state.user.count,
    }),
  },
 methods: {
     //将数据传递到我vuex中的方法里面
     ...mapActions({ 
         //事件名称："属性名"
         btn: "user/setNumber",
     }),
 },
</script>
<style lang="less"></style>

总结

本地存储和vuex本人感觉vuex用的会更加的实在一些，如果去需要长期将值存储，需要下载持久化插件可参考，juejin.cn/post/684490… 里面很详细的告诉了我门应该如何下载。