前端Vue框架-vuex状态管理详解

新人报道！多多关照～多提宝贵意见谢谢～

vuex理解

采用集中式存储管理模式。用来管理组件的状态，并以自定义规则去观测实时监听值得变化。

状态模式管理理解

属性	理解
state	驱动应用的数据源
view	以声明的方式，将 state 映射到视图
actions	响应在 view（视图）上的用户输入导致的状态变化。

在这里插入图片描述

new Vue({
  // state 驱动应用的数据源
  data(){
    return {
      count:0
    }
  },
  //  view 以声明的方式，将 state 映射到视图 
 template: `<div> {{ count }} </div>`,
  // actions 响应在 view（视图）上的用户输入导致的状态变化。
  methods: {
    add(){
      this.count ++ 
    }
  }
})

vuex安装引入

使用前需要下载vuex

npm install vuex --save

在我们的main.js文件中引入该文件，在文件里面添加 import store from ‘./store’;，再在vue实例全局引入store对象；

import Vue from 'vue'
import App from './App'
import router from 'router'
import store from './stroe'
Vue.config.productionTip = false;
new Vue({
    el:'#app',
    store,
    router,
    componment:{ App },
    template:'<App/>
})

然后在src目录下创建store目录，store目录下创建index.js编写以下代码

import Vue from 'vue'   //引入vue
import Vuex from 'vuex' //引入vuex
Vue.use(Vuex);
//创建Vuex实例
const store = new Vuex.Store({
    
})
export default store;//导出store

1.vuex四大核心属性

state：数据源

我们需要保存的数据在这里定义并存储，可以在组件中通过this.$store.state来获取这些数据

首先在store目录下index.js编写以下代码

import Vue from 'vue'   //引入vue
import Vuex from 'vuex' //引入vuex
Vue.use(Vuex);
//创建Vuex实例
const store = new Vuex.Store({
    state:{
        count:1,    //定义数据源
    }
})
export default store;//导出store

然后在我们的任意组件中就可以使用this.$store.state方法获取我们的数据count

<template>
    <div>
        {{ this.$store.state.count }}  //1.页面调用
        {{ msg }} //2.方法赋值
    </div>
</template>
<script>
    export default {
        name : 'home',
        data () {
            return {
                msg : null
            }
        },
        mounted(){
            this.msg = this.$store.state.count;
        }
    }
<script/>

getters：计算属性

getters相当于vue中的computed计算属性，getters的返回值会根据它的依赖被缓存起来，且只有他的依赖值发生改变时才会被重新计算，这里我们可以通过定义getters监听state中的值的变化，返回计算结果。

首先在store目录下index.js编写以下代码

import Vue from 'vue'   //引入vue
import Vuex from 'vuex' //引入vuex
Vue.use(Vuex);
//创建Vuex实例
const store = new Vuex.Store({
    state:{
        count:1,    //定义数据源
    },
    getters:{
        getStateCount: state => state.count+1 //观测
    },
})
export default store;//导出store

在组件页面获取

<template>
    <div>
        {{ this.$store.state.count }}  // count 值：1
        {{ this.$store.getters.getStateCount }}  //调用getters  值：2
    </div>
</template>

mutations：事件处理器

数据我们在页面是获取到了，但是如果我们需要修改count值怎么办？如果需要修改store中的值唯一的方法就是提交mutation来修改。

简单事件实例，还是在store/index.js

import Vue from 'vue'   //引入vue
import Vuex from 'vuex' //引入vuex
Vue.use(Vuex);
//创建Vuex实例
const store = new Vuex.Store({
    state:{
        count:1,    //定义数据源
    },
    getters:{
        getStateCount: state => state.count+1 //观测
    },
    mutations:{
        add:state => state.count++,
        red:state => state.count--
    }
})
export default store;//导出store

组件中使用this.$store.commit(‘mutations事件名称’)调用该方法

<template>
    <div>
        <p>{{ count }}<p/>
        <p>
            <button @click='add'></button>
            <button @click='red'></button>
        </p>
    </div>
</template>
<script>
    export default {
        name : 'home',
        data () {
            return {
                count: 1,
            }
        },
        computed: {
            count () {
                return this.$store.state.count
            }
        },
        methods: {
            add(){
                this.$store.commit('add')
            },
            red(){
                this.$store.commit('red')
            },
    }
</script>

actions: 可以给组件使用的函数，用来驱动事件处理器 mutations

通过以上学习我们学会了如何修改state中的值。但是，官方并不建议我们这样直接去修改store里面的值，而是让我们去提交一个actions，在actions中提交mutation再去修改状态值。

因此我们需要先定义一个actions去提交mutation的函数。

import Vue from 'vue'   //引入vue
import Vuex from 'vuex' //引入vuex
Vue.use(Vuex);
//创建Vuex实例
const store = new Vuex.Store({
    state:{
        count:1,    //定义数据源
    },
    getters:{
        getStateCount: state => state.count+1 //观测
    },
    mutations:{
        add:state => state.count++,
        red:state => state.count--
    },
    actions:{
        addFn(context) {
            context.commit('add');
        },
        redFn(context) {
            context.commit('red')
        }
})
export default store;//导出store

然后编辑组件文件，虽然效果相同，但是还是要严格遵从官方写法。

<template>
    <div>
        <p>{{ count }}<p/>
        <p>
            <button @click='addFn'></button>
            <button @click='redFn'></button>
        </p>
    </div>
</template>
<script>
    export default {
        name : 'home',
        data () {
            return {
                count: 1,
            }
        },
        computed: {
            count () {
                return this.$store.state.count
            }
        },
        methods: {
            addFn(){
                this.$store.dispatch('addFn')
            },
            redFn(){
                this.$store.dispatch('redFn')
            },
    }
</script>

vuex还有一个属性 modules :存放模块化的数据（不是必须的）

2.vuex拓展

mapState
mapGetters
mapActions

在我们开发过程中会频繁调用store中的方法和数据，此时使用this.$store.state等写法就会显得很臃肿，所有这里介绍mapState、mapGetters、mapActions。

在我们需要使用vuex状态管理的组件中引入。

import { mapState、mapGetters、mapActions } from 'vuex';
    .
    .
    .
    computed:{
        ...mapState({
            count : state => state.count
        })
    }

此时我们页面使用count调用效果相同。

前端Vue框架-vuex状态管理详解

新人报道！多多关照～多提宝贵意见 谢谢～

vuex理解

vuex安装引入

猜你喜欢

新人报道！多多关照～多提宝贵意见谢谢～