转载请注明出处：
一、Vuex是什么？
介绍：Vuex 是一个专为 [Vue](https://so.csdn.net/so/search?q=Vue&spm=1001.2101.3001.7020).js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。他可以方便实现组件之间的数据共享
理解：核心就是 store（仓库），仓库是用来干什么的？你就当它用来储存东西的。
二、我们什么时候应该用到Vuex呢？
a.小应用不建议使用Vuex,因为小项目使用 Vuex 可能会比较繁琐冗余；
b.中大型单页应用，因为要考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择；
三、对于使用Vuex的理解是什么？
由于Vue是单向数据流，子组件内部不能直接修改从父级传递过来的数据，子组件与子组件之间无法相互传递数据。如果我们想让两个子组件之间进行通信的话，可以借助子组件 A 向父组件传值，父组件接收子组件 A 的数据后再传给 B 组件这样的方式进行通信。
但是这样会有一个问题，就是如果子组件 A 的父组件上面还有一层爷爷组件，或者还有更多祖父类型的层级，那么是不是会很麻烦。
因此，我们会想到能不能我们将一个共有的数据存在一个特定的地方，用的时候自己去拿，这样就不需要一层层传值，于是乎 Vuex 就应运而生了。
四、vuex由五部分组成(五种状态/五种属性)
-
state: 数据 -
actions:可以包含异步操作 -
mutations: 唯一可以修改state数据的场所 -
getters: 类似于vue组件中的计算属性，对state数据进行计算（会被缓存） -
modules:模块化管理store（仓库），每个模块拥有自己的 state、mutation、action、getter
五、安装配置
第一步：npm i vuex --save/-S
第二步： 创建store.js
第三步：挂载使用 Vue.use(vuex)
第四步：const store = new Vuex.Store({...配置项})
第五步：导出 export default store
第六步：导入main.js 在根实例配置 store 选项指向 store 实例对象
具体操作步骤：
安装
npm install vuex
创建store.js
import Vue from 'vue'
// 初始化一个vuex的实例（数据仓库） 导出即可
import Vuex from 'vuex'
import axios from 'axios'
// 使用安装
Vue.use(Vuex)
// 初始化,并声明：state，mutations,actions,getters等属性
export default new Vuex.Store({
state: {
// 所有的任务列表
list: [],
// 文本框的内容
inputValue: 'aaa',
// 下一个Id
nextId: 5,
viewKey: 'all'
},
mutations: {
// 清除已完成的任务
cleanDone(state) {
state.list = state.list.filter(x => x.done === false)
},
// 修改视图的关键字
changeViewKey(state, key) {
state.viewKey = key
}
},
actions: {
getList(context) {
axios.get('/list.json').then(({ data }) => {
// console.log(data)
context.commit('initList', data)
})
}
},
getters: {
// 统计未完成的任务的条数
unDoneLength(state) {
return state.list.filter(x => x.done === false).length
},
}
})
把store对象挂载到Vue实例中，可以在main.js 中进行绑定
import store from './store.js'
import App from './App.vue'
new Vue({
render: h => h(App),
store
}).$mount('#app')
标签：Vue,Vuex,js,学习,state,使用,组件,VUEX,store From： https://www.cnblogs.com/zjdxr-up/p/17056489.html