Vue：初次使用vueX

Posted 2020-10-17 Long_WangQing

什么是vueX

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

vueX的组成

主要分为三个部分：

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

vueX使用场景

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。

一个简单的 global event bus 就足够您所需了。但是，如果您需要构建是一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

vueX应用

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

由于项目刚刚开始，只是用来存储一些状态。后期如果遇到什么问题，会继续补全。

npm install --save vuex

上述是通过npm安装的vueX，引入：

import Vuex from ‘vuex‘
import Vue from ‘vue‘

Vue.use(Vuex)

接着我们应该创建我们的仓库‘store’

const store = new Vuex.Store({
    state:{
        isChoose:true,
        userInfo:{},
        count:0,
        all_url:‘http://localhost:8080/#/home/‘
        // all_url:‘https://ap.t-house.cn/‘,
        // test_url:‘https://ap.dev.t-house.cn/‘
    },
    mutations:{
        /*更改 Vuex 的 store 中的状态的唯一方法是提交
         mutation。每一个mutation都有一个字符串的事件
         类型(type)和一个回调函数(handler)。
         mutation是同步操作*/
        /*increment (state) {
          // 变更状态
          state.count++;
        },*/
        /*你不能直接调用一个 mutation handler。这个选项
        更像是事件注册：“当触发一个类型为 increment 的
        mutation 时，调用此函数。”要唤醒一个 
        mutation handler，你需要以相应的 type 调用 
        store.commit 方法:store.commit("")
        */
        /*同时你也可以想commit传递额外参数，即载荷(payload)
        */
        /*increments (state,n) {
          // 变更状态
          console.log(state.count)
          state.count+=n;
        }*/
    },
    actions:{
        /*action和mutation类似。
        区别在于：action是异步操作；
                  action提交并不直接改变状态
        */
        increment(context){
            console.log(context)
            context.commit(‘increments‘)
        }
    }
})

mutation可以通过store.commit("increments")激活

action可以通过store.dispatch(‘increment‘)激活

在store中，我们可以声明一些全局变量，这样便于我们后期维护和修改。

 

官方文档