浅谈vuex
什么是vuex？
-
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应
用的所有组件的状态，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更
新。并以相应的规则保证状态以一种可预测的方式发生变化。 -
借鉴 了Flux、Redux、 The Elm Architecture
-
一个 Vuex 应用的核心是 store（仓库，一个容器），store包含着你的应用中大部分的状态 (state)。
4.Vuex 也集成到 Vue 的官方调试工具https://github.com/vuejs/vue-devtools
2019-03-25_161324.png
什么情况下应该使用 Vuex？
- 不适用：小型简单应用，用 Vuex 是繁琐冗余的，更适合使用简单的组件通信。
- 适用于：如果状态较多的项目都会用到Vuex，更加的方便，如果组件嵌套层级过深、多个组件依赖了同一个状态，那么必然要使用Vuex更加的方便
其实在实际开发的项目中， 都是Vuex和组件通信混合的
安装：
npm install vue
npm install vuex
使用：
1.引入vue import Vue from "vue"
2.引入vuex import Vuex from "vuex"
3. Vue.use(Vuex)
4.定义一个容器 const store=new Vuex.Store({ // （注意）：在应用中是唯一的，只能定义一个
})
5.记住一定得导出 export default store
6.注意还得把自定义的store注入到Vue的根实例中也就是main.js中 new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
核心概念：
Store
- 相当于一个容器，里面包含了应用的大部分的状态（state）
- 状态存储只能是响应式的，当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会得到高效更新。
State
- state为vuex的状态存储，vuex 的状态存储是响应式的，应用中的大部分状态都存储在state中
//在state中定义状态
const store = new Vuex.Store({
state: {
shopList:[
{
id：1,
count:1,
price:￥12,
name:'鱼香肉丝'
},
{
id：2,
count:3,
price:￥10,
name:'大盘鸡'
},
{
id：3,
count:3,
price:￥20,
name:'煎饼果子'
},
] // 这里的 shopList 就是状态，之前称之为数据 （数据 === 状态）
}
})
//( 要使用的时候 ) 在要使用定义的状态的组件中
//通过计算属性（computed）去获取仓库中定义的数据
computed: {
getShopList () {
return this.$store.state.shopList
}
}
Getter
-
有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数：
-
如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。
-
Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
-
Getter 接受 state 作为其第一个参数：
const store = new Vuex.Store({
//State
state: {
shopList:[
{
id：1,
count:1,
price:￥12,
name:'鱼香肉丝'
},
{
id：2,
count:3,
price:￥10,
name:'大盘鸡'
},
{
id：3,
count:3,
price:￥20,
name:'煎饼果子'
},
] // 这里的 shopList 就是状态，之前称之为数据 （数据 === 状态）
}
})
//Getters
getters:{
//总价
totalPrice (state) {
let price=0
state.ShopList.map(item=>{
price+=item.price*item.count
})
return price
}
}
})
//通过计算属性（computed）去获取仓库中定义的数据
computed: {
getShopList () {
return this.$store.state.shopList
},
getTotalPrice(){
return this.$store.getters
}
}
Mutation
- 更改 Vuex 的 store 中的状态（state）的唯一方法是通过commit提交 mutation
//在组件中
this.$store.commit('addIncrement', 5)
const store = new Vuex.Store({
//State
state: {
shopList:[
//同上
] // 这里的 shopList 就是状态，之前称之为数据 （数据 === 状态）
}
})
//Mutations
mutations:{
addIncrement(state,5){
//操作逻辑
}
}
//Getters
getters:{
//同上
}
})
Action
Action 类似于 mutation，不同在于：
- Action 提交的是 mutation，而不是直接变更状态。
- Action 可以包含任意异步操作。
让我们来注册一个简单的 action：
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。当我们在之后介绍到 Modules 时，你就知道 context 对象为什么不是 store 实例本身了。
Module
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：
通过computed取值的时候需要加上子模块的名称，除此之外都无需添加子模块名称
详解请到Modules
