vuex是什么？以及和vue的区别

那么什么是vuex？

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

Vuex 的目的是为了管理共享状态，为了达到这个目的，它制定了一系列的规则，比如修改数据源 state、触发 actions 等等，都需要遵循它的规则，以此来达到让项目结构更加清晰且易于维护的目的。

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

vuex和vue区别？

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

Vuex中的store

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

Vuex和单纯的全局对象有以下两点不同：

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

如何创建Store

安装好Vuex后，我们就可以创建store了，如下所示：

const store = new Vuex.Store({...});

从上述代码可以知道，store 是Vuex.Store 这个构造函数new出来的实例。在构造函数中可以传一个对象参数，这个参数可以包含5个对象：state、getters 、mutations 、actions 、mudules ，其中最基本的是state和mutations 。

示例:

我们可以在项目的 src 目录下新建一个store.js 文件，在文件中引用vue和vuex：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex) // 全局安装 Vuex

const store = new Vuex.Store({
    state: {
      count: 0
    },
    mutations: {
      increment (state) {
        state.count++
      }
    }
})
export default store  // 将vuex实例暴露出去，以便其他的任何文件进行共享数据

一个完整的store结构:

const store = new Vuex.Store({
  state: {
    // 存放状态
  },
  getters: {
    // state的计算属性
  },
  mutations: {
    // 更改state中状态的逻辑，同步操作
  },
  actions: {
    // 提交mutation，异步操作
  },
  // 如果将store分成一个个的模块的话，则需要用到modules。
   //然后在每一个module中写state, getters, mutations, actions等。
  modules: {
    a: moduleA,
    b: moduleB,
    // ...
  }
});

简单的Store Demo

启动vue项目，npm run serve，在store.js中添加一个新状态count

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

修改组件HelloWorld，开始使用Store里注册的新状态

<template>
  <div class="hello">
    <h1>{{ this.$store.state.count }}</h1>
     
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

浏览效果

往store.js里的mustations添加改变状态值的加减功能

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  state: {
    count:1
  },
  mutations: {
    addmu(state){state.count++},
    lessmu(state){state.count--}
  },
  actions: {
 
  }
})

回到HelloWorld组件，添加增加和减少按钮，用来提交store的mutation

<template>
  <div class="hello">
    <h1>{{ this.$store.state.count }}</h1>
    <div>
      <button @click="addfn()">增加</button>
      <button @click="lessfn()">减少</button> 
    </div>
 
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods:{
    addfn(){
       //提交名为addmu的mutations
       this.$store.commit('addmu');
    },
    lessfn(){
       //提交名为lessmu的mutations
       this.$store.commit('lessmu');
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

为了更直观的感受下Store的魅力，在views文件夹中添加一个About.vue也使用store状态

About.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <HelloWorld/>
  </div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
 
export default {
  name: 'home',
  components: {
    HelloWorld
  }
}
</script>

跳转About.vue或者Home.vue，store里面的状态值是怎么样的就是怎么样的？

92IT

Just love IT.