Vuex 使用教程

Vuex

各子模块的内部结构及作用

这是vuex的内部代码结构，所有的子模块都是一样的
state：存放数据状态；
action：指派 mutation ；
mutation：修改state里面的状态；
getter：侧重于对数据的再次加工；
mdules：用于模块化；

Store： 仓库，是使用Vuex应用程序的核心，每一个应用仅有一个 Store。Store 是一个容器，包含应用中的大部分状态，不能直接改变 Store 中的状态，要通过提交 Mutation 的方式
State： 状态保存至 Store 中，因为 Store 是唯一的，因此状态也是唯一的，称为单一状态树。但是如果所有的状态都保存在 State 中，程序则难以维护，可以通过后续的模块来解决该问题。注意，这里的状态时响应式的
Getter： 像是 Vue 中的计算属性，对 state 中的数据进行加工，方便从一个属性派生出其他的值。它内部可以对计算的结果进行缓存，只有当依赖的状态发生改变时才会重新计算
Mutation： 状态的变化必须通过提交 Mutation 来完成 （同步）
Action： 和 Mutation 类似，不同的是 Action 可以进行异步操作，内部改变状态的时候都需要提交 Mutation
Module： 模块，由于使用单一状态树，应用的所有状态会集中到一个比较大的对象上来，当应用变得非常复杂时，Store对象就有可能变得非常臃肿。为了解决这个问题，Vuex允许我们将 Store 分割成模块每个模块拥有自己的 State 、Mutation、Action、Getter甚至是嵌套的子模块

一般使用时目录结果

src下新建store文件夹，文件夹下新建 index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})
// 或者利用子模块
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    user
  }
})
export default store

src下新建store文件夹，文件夹下新建 modules 文件夹，下面新建子模块user.js

const user = {
  strict: true, // 开启严格模式后直接在组件中修改state时会报错（但数据仍然改变成功），如果不开启就不会报错
  namespaced: true, // 开启命名空间，防止多个模块文件之间的命名冲突
  state: {},
  mutations: {},
  actions: {},
  getters: {}
}
export default user

main.js 中引入

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

使用

// 主模板中使用
this.$store.state.xxx
this.$store.getters.xxx
this.$store.dispatch('LogOut')
// 子模版中使用
this.$store.state.user.xxx
this.$store.getters.xxx
this.$store.dispatch('user/LogOut', size)

实例

<template>
    <div class="contentViews" style="text-align: left;">
        <el-card class="box-card">
                姓名: {{ crjName }} - {{ $store.state.user.crjName }}
                <br />
                年龄: {{ $store.state.user.crjAge }} - {{ crjAge }}
                <br />
                vuex 计算属性：{{ currentCrjName }}
                <br />
                token: {{ token }} - {{ $store.state.user.token }}
                <br />
                {{ avatar }}
                <el-button type="primary" size="small" @click.native="getMapActions">改变姓名 mapActions</el-button>
                <el-button type="primary" size="small" @click.native="getMapMutations">改变姓名 mapMutations</el-button>
                <el-button type="primary" size="small" @click.native="tc">退出</el-button>
                <el-button type="primary" size="small" @click.native="tc1">退出</el-button>
        </el-card>
    </div>
</template>

<script>
// 1.引入辅助函数
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex';
export default {
    computed: {
        ...mapState('user', ['crjName', 'crjAge']),
        ...mapGetters('user', ['currentCrjName']),
        ...mapState({name:'crjName', age: 'crjAge'})
        ...mapState({
            avatar: a => a.user.avatar
        }), // 这里想要访问根模块里面的方法  需要这样写后面加上 {root:true}
        ...mapGetters(['token']),
        ...mapGetter({
            token: 'token'
        })
        ...mapActions(['LogOut'])
    },
    methods: {
        // 2，使用
        ...mapActions('user', ['setCrjName']),
        ...mapMutations('user', ['commitCrjName']),
        // 这里想要访问根模块里面的方法  需要这样写后面加上 {root:true}
        ...mapMutations({
            commitCrjName: 'commitCrjName'
        })
        getMapActions() {
            this.setCrjName('李四');
        },
        getMapMutations() {
            this.commitCrjName('马武');
        },
        tc() {
            this.LogOut.then(() => {
                location.href = '/';
            })
        },
        tc1() {
            this.$store.dispatch('FedLogOut').then(() => {
                location.href = '/';
            })
        },
    }
};
</script>

Vuex中actions的使用

actions属性是用来处理异步方法的，通过提交mutations实现。Action| Vuex API 参考 | Vuex

说明

Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。

特点

1.异步操作，通过mutations来改变state。

2.不能直接改变state里的数据。

3.包含多个事件回调函数的对象。

4.执行方式：通过执行 commit()来触发 mutation 的调用, 间接更新 state

5.触发方式: 组件中: $store.dispatch(‘action 名称’, data1)

6.可以包含异步代码(例如：定时器, 请求后端接口)。

使用

// 直接使用
this.$store.dispatch('actions方法名', 具体值)        // 不分模块
this.$store.dispatch('模块名/actions方法名', 具体值) // 分模块
// mapActions
import { mapActions } from 'vuex'
export default {
    computed: {
        // 不分模块
        ...mapActions(['actions方法名'])          
  
        // 分模块，不改方法名
        ...mapActions('模块名', ['actions方法名'])
         
        // 分模块，不改方法名
        ...mapActions('模块名',{'新actions方法名': '旧actions方法名'})
    }
}

实例

<script>
import { mapActions } from 'vuex'
export default {
    computed: {
        ...mapActions(['LogOut'])
    },
    methods: {
        fedLogOut() {
            this.$store.dispatch('FedLogOut').then(() => {
                location.href = '/';
            })
        },
        logout() {
           this.LogOut.then(() => {
               location.href = '/';
           })
        }
    }
}
</script>