Vuex是什么，怎么使用。_vue vuex 官网是用什么做的

Vuex是什么

VueX 是一个专门为 Vue.js 应用设计的状态管理架构，统一管理和维护各个vue组件的可变化状态 (可以理解成 vue 组件里的某些 data )。
Vuex通俗说就是组件间数据之间的共享。

首先安装vuex

直接使用npm安装 npm install vuex或者直接到页面引入vuex.js文件。

vuex和vue区别？

首先vue是一个前端框架（与angular和react同级别），vuex只是vue的一个插件，官网说vuex是状态管理工具，其实说白了，vuex就是一个存放多个组件共用的一个数据的存放、更改、处理的一个容器，就是说来存放处理公共数据的工具，存放的数据一变，各个组件都会更新，也就是说存放的数据是响应式的。

Vuex有五个核心概念，state, getters, mutations, actions, modules。本文将对这个五个核心概念进行梳理。

总结

• state => 基本数据
• getters => 从基本数据派生的数据
• mutations => 提交更改数据的方法，同步！
• actions => 像一个装饰器，包裹mutations，使之可以异步。
• modules => 模块化Vuex

State

state即Vuex中的基本数据！

单一状态树

Vuex使用单一状态树，即用一个对象就包含了全部的状态数据。state作为构造器选项，定义了所有我们需要的基本状态参数。

在Vue组件中获得Vuex属性

• 我们可以通过Vue的Computed获得Vuex的state，如下：

 1. const store = new Vuex.Store({
 2.      state:{
 3.        coust:0
 4.      }
 5.   })
 6. const  app = new Vue({
 7.      store,
 8.       computed:{
 9.          count:function(){
10.            return  this.$store.state.coust
11.           }
12.        }
13.    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14

每当 store.state.count在这里插入代码片 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。

getters

即从store的state中派生出的状态。
getters接收state作为其第一个参数，接受其他 getters 作为第二个参数，如不需要，第二个参数可以省略如下例子：

const store = new Vuex.Store({
    state: {
        count:0
    }，
    getters: {
        // 单个参数
        countDouble: function(state){
            return state.count * 2
        },
        // 两个参数
        countDoubleAndDouble: function(state, getters) {
            return getters.countDouble * 2
        }
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

与state一样，我们也可以通过Vue的Computed获得Vuex的getters。

const app = new Vue({
    //..
    store,
    computed: {
        count: function(){
            return this.$store.state.count
        },
        countDouble: function(){
            return this.$store.getters.countDouble
        },
        countDoubleAndDouble: function(){
            return this.$store.getters.countDoubleAndDouble
        }
    },
    //..
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

mutations

提交mutation是更改Vuex中的store中的状态的唯一方法。
mutation必须是同步的，如果要异步需要使用action。
每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。（提交荷载在大多数情况下应该是一个对象）,提交荷载也可以省略的。

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    //无提交荷载
    increment(state) {
        state.count++
    }
    //提交荷载
    incrementN(state, obj) {
      state.count += obj.n
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

actions

Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
我们用如下例子来结束actions：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      setInterval(function(){
        context.commit('increment')
      }, 1000)
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Modules

使用单一状态树，导致应用的所有状态集中到一个很大的对象。但是，当应用变得很大时，store 对象会变得臃肿不堪。

为了解决以上问题，Vuex 允许我们将 store 分割到模块（module）。每个模块拥有自己的 state、mutation、action、getters、甚至是嵌套子模块——从上至下进行类似的分割：

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

persist

Vuex 解决了多视图之间的数据共享问题。但是运用过程中又带来了一个新的问题是，Vuex 的状态存储并不能持久化。也就是说当你存储在 Vuex 中的 store 里的数据，只要一刷新页面，数据就丢失了。

引入vuex-persist 插件，它就是为 Vuex 持久化存储而生的一个插件。不需要你手动存取 storage ，而是直接将状态保存至 cookie 或者 localStorage 中。具体用法如下：

安装：

npm install --save vuex-persist

yarn add vuex-persist
1
2
3

引入：

import VuexPersistence from 'vuex-persist'
1

先创建一个对象并进行配置：

const vuexLocal = new VuexPersistence({
    storage: window.localStorage
})
1
2
3

引入进vuex插件：

const store = new Vuex.Store({
  state: { ... },
  mutations: { ... },
  actions: { ... },
  plugins: [vuexLocal.plugin]
}) 
1
2
3
4
5
6

安装：

npm install --save vuex-persist

yarn add vuex-persist
1
2
3

引入：

import VuexPersistence from 'vuex-persist'
1

先创建一个对象并进行配置：

const vuexLocal = new VuexPersistence({
    storage: window.localStorage
})
1
2
3

引入进vuex插件：

const store = new Vuex.Store({
  state: { ... },
  mutations: { ... },
  actions: { ... },
  plugins: [vuexLocal.plugin]
}) 
1
2
3
4
5
6

版权声明：本文为CSDN博主「ReedSun」的原创文章，遵循CC 4.0 BY-SA
原文链接：https://blog.csdn.net/weixin_35955795/article/details/57412181