Vue全家桶之VueX(六)，CSS四种定位方式的详解

1.2、单界面的状态管理

---

我们知道，要在单个组件中进行状态管理是一件非常简单的事情。

这图片中的三种东西如下：

• State：状态

• View：视图层，可以针对 State 的变化，显示不同的信息

• Actions：这里的Actions主要是用户的各种操作：点击、输入等等，会导致状态的变化

当前计数:{ {counter}}

<button @click=“counter+=1”>+1

<button @click=“counter-=1”>-1

在这个案例中，我们有木有状态需要管理呢？没错，就是个数counter。

counter需要某种方式被记录下来，也就是我们的State。

counter目前的值需要被显示在界面中，也就是我们的View部分。

界面发生某些操作时（我们这里是用户的点击，也可以是用户的input），需要去更新状态，也就是我们的Actions

这不就是上面的流程图了吗？

ok，先安装 vuex

npm install vuex --save

1.3、多界面状态管理

---

Vue已经帮我们做好了单个界面的状态管理，但是如果是多个界面呢？

• 多个视图都依赖同一个状态(一个状态改了，多个界面需要进行更新)

• 不同界面的 Actions 都想修改同一个状态(Home.vue 需要修改，Profile.vue 也需要修改这个状态)

也就是说对于某些状态(状态1/状态2/状态3)来说只属于我们某一个视图，但是也有一些状态(状态a/状态b/状态c)属于多个视图共同想要维护的

• 状态1/状态2/状态3 你放在自己的房间中，你自己管理自己用，没问题。

• 但是状态a/状态b/状态c我们希望交给一个大管家来统一帮助我们管理！！！

• 没错，Vuex就是为我们提供这个大管家的工具。

全局单例模式(大管家)

• 我们现在要做的就是将共享的状态抽取出来，交给我们的大管家，统一进行管理。

• 之后，你们每个视图，按照我规定好的规定，进行访问和修改等操作。

• 这就是Vuex背后的基本思想。

---

我们创建一个文件夹 src/store，并且在其中创建一个 index.js 文件，代码如下：

import Vuex from ‘vuex’

import Vue from ‘vue’

// 1.安装插件

Vue.use(Vuex)

// 2.创建对象

const store = new Vuex.Store({

state: {

count: 0

},

mutations: {

increment(state){

state.count++

},

decrement(state){

state.count–

}

},

actions: {

},

getters: {

},

modules: {

}

})

// 导出store对象

export default store

其次，我们让所有的Vue组件都可以使用这个store对象

• 来到 src/main.js文件，导入store对象，并且挂载到new Vue中