vuex的核心概念和基本使用是怎么样的

vuex的核心概念和基本使用是怎么样的，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

介绍

Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享

开始

安装

①直接下载方式

创建一个 vuex.js 文件 将https://unpkg.com/vuex这个网址里的内容放到该文件夹里。

②CND方式

③NPM方式

npm install vuex --save

④Yarn方式

yarn add vuex

NPM方式安装的使用方式

1.在 scr 文件里创建一个 store / index.js 的文件夹，写入以下内容。

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {},mutations: {},actions: {},modules: {}})

2.在main.js 里引入，然后挂载到 Vue 实例里

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

store概念及使用

概念：

就是组件之间共享数据的。

只有 mutations 才能修改 store 中的数据

使用：

先定义后使用

定义

state: {  num: 0}

使用

方式1(推荐)

{{ numAlias }}
import { mapState } from 'vuex'export default {  //计算函数  computed: mapState({    // 传字符串参数 'count' 等同于 `state => state.count`    numAlias: 'num',//常用key是自己起的名随便 value接收的数据    // 箭头函数可使代码更简练    count: state => state.count,    // 为了能够使用 `this` 获取局部状态，必须使用常规函数    countPlusLocalState (state) {      return state.count + this.localCount    }    //可以定义其余的计算函数  }),  //或者这样  //计算函数  computed: {    mapState(['count'])  }}

方式2

{{ $store.state.count }}

mutations概念及使用

概念：

修改store里的数据，严格规定不能在其余的地方修改store的数据，mutations里不要执行异步操作。

mutation 必须同步执行,不能异步执行。

使用：

先定义方法后使用

定义

mutations: {        //increment自定义方法 store参数是store数据, parameter参数是接收到的数据,可不要    increment (state, parameter) {        // 变更状态        state.num++    }}

使用

方式1(推荐使用)

import { mapState, mapMutations } from 'vuex'//方法methods: {        ...mapMutations([            // mutations自定义的方法名            'increment'    ]),    love() {            // 直接this调用 this.increment('需要传过去的数据,可不要')        this.increment('Bin')    }}

方式2

methods: {    love() {            // this.$store.commit('自定义的名称', '传过去的数据,可不传')            this.$store.commit('increment', 'data')    }}

action概念及使用

概念：

用于处理异步操作。

如果通过异步操作变更数据，必须通过action，而不能使用mutation，但是在action中还是要通过触发mutation的方式间接变更数据。

Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更数据(状态)。

• Action 可以包含任意异步操作。

定义

mutations: {        //increment自定义方法 store参数是store数据, parameter参数是接收到的数据,可不要    increment (state, parameter) {        // 变更状态        state.num++    }},actions: {        //add 自定义方法 context是参数，可以把它当作vuex的实例    add(context) {            //可以通过context.commit('mutations中需要调用的方法')            context.commit('increment')    }}

使用

方式1(推荐)

import { mapState, mapMutations, mapActions } from 'vuex'export default {  methods: {    ...mapActions([      'add', // 将 `this.add()` 映射为 `this.$store.dispatch('add')`      // `mapActions` 也支持载荷：      'add' // 将 `this.add(amount)` 映射为 `this.$store.dispatch('add', amount)`    ]),    ...mapActions({      add: 'add' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`    }),    love() {            // 直接this调用 this.add('需要传过去的数据,可不要')            this.add(data)    }  }}

方式2

methods: {    love() {            // this.$store.dispatch('自定义的名称', '传过去的数据,可不传')            this.$store.dispatch('add', data)    }}

getters概念及使用

概念：

getter用于对store中的数据进行加工处理形成新的数据。getting可以对store中已有的数据加工处理之后形成新的数据，类似Vue的计算缩写。

定义

state: {  num: 0},getters: {    doneTodos: state => {            return state.num = 10    }}

使用

方式1(推荐)

{{ doneTodos }}
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'export default {  //计算函数  computed: {      ...mapState(['count']),      ...mapmapGetters(['doneTodos'])  }}

方式2

{{ $store.getters.doneTodos }}

看完上述内容，你们掌握vuex的核心概念和基本使用是怎么样的的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注行业资讯频道，感谢各位的阅读！