[Vuex系列] - 初尝Vuex第一个例子

心已赠人 2021-11-22 17:14 294阅读 0赞

### Vuex是什么？ ###

Vuex是一个专为vue.js应用程序开发的状态管理库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护，这就是 Vuex 背后的基本思想。

### Vuex安装和引入 ###

1.  安装Vuex依赖包 npm install vuex --save
2.  在项目中引入Vuex。在src目录下，新建一个store文件夹，用来存放vuex相关文件。

![1][]

3. 在stroe文件夹下新建store.js文件，用来引入vuex。

import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    const store = new Vuex.Store()
    export default store

4. 在main.js里面引入store，进行全局注入

import Vue from 'vue'
    import App from './App'
    import router from './router'
    import store from './store/store'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      store, // 使用store
      components: { App },
      template: '<App/>'
    })

### 如何在项目中声明Vuex ###

*  我们创建一个state

state是单一状态树，用一个对象就包含了全部的应用层级状态。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

1.  在store文件夹下新建state.js文件，存放state变量state.js文件内容如下

const state = {
      num: 0
    }
    export default state

*  创建一个mutations

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

1.  在store文件夹下新建mutations.js,存放mutattions内容，mutations.js文件内容如下

import state from './state'
    
    const mutations = {
      addNum () {
        state.num++
      }
    }
    
    export default mutations

*  创建一个getters

vuex允许我们在store中定义“getter”（可以认为是store的计算属性）。就像计算属性一样，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算

1.  在store文件夹下新建getters.js,存放getters内容，getters.js文件内容如下

import state from './state'
    
    const getters = {
      getNum () {
        return state.num
      }
    }
    
    export default getters

*  创建一个actions

Action类似于mutation，不同在于：Action提交的是mutation，而不是直接变更状态。Action 可以包含任意异步操作。Action函数接受一个与store实例具有相同方法和属性的context对象，因此你可以调用context.commit提交一个 mutation，或者通过context.state和context.getters来获取state和getters。

1.  在store文件夹下新建actions.js,存放actions内容，actions.js文件内容如下

const actions = {
      addNumAction (context, num) {
        context.commit('addNum', num)
      }
    }
    
    export default actions

*  在store.js中注册state,mutations,gatters,actions

import Vue from 'vue'
    import Vuex from 'vuex'
    import state from './state'
    import mutations from './mutations'
    import getters from './getters'
    import actions from './actions'
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
      state,
      mutations,
      getters,
      actions
    })
    
    export default store

### 如何在组件中使用Vuex ###

在src文件夹下新建views文件夹，在views文件夹下新建vuex文件夹，并在vuex文件夹新建index.vue文件

![1 1][]

index.vue文件的内容

<template>
      <div class="app">
        <p>{
          { num }}</p>
        <button @click="addNumAction">+ADD</button>
      </div>
    </template>
    
    <script>
    import { mapActions, mapState, mapGetters } from 'vuex'
    export default {
      data () {
        return {
        }
      },
      computed: {
        ...mapState([
          'num'
        ])
      },
      methods: {
        ...mapActions([
          'addNumAction'
        ]),
        ...mapGetters([
          'getNum'
        ])
      }
    }
    </script>

1.  配置路由

import Vue from 'vue'
    import Router from 'vue-router'
    import VueX from '@/views/vuex/index'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/vuex',
          name: 'vuex',
          component: VueX
        }
      ]
    })

最终效果

![1 2][]

转载于:https://www.cnblogs.com/wangshucheng/p/vuex-001.html

[1]: https://user-gold-cdn.xitu.io/2019/4/21/16a3ec2d71a74087?imageView2/0/w/1280/h/960/ignore-error/1
[1 1]: https://user-gold-cdn.xitu.io/2019/4/21/16a3ec12fa283b9d?imageView2/0/w/1280/h/960/ignore-error/1
[1 2]: https://user-gold-cdn.xitu.io/2019/4/21/16a3ec2454934cc5?imageView2/0/w/1280/h/960/ignore-error/1