在一个大型的项目中，难免会遇到复杂的数据处理，这个时候经常听到Vuex来管理，那么到底什么是vuex，我们该如何去用？？？看了几遍官方文档，结合栗子似乎有点眉目。
什么是vuex
官方文档是这样解释的：它是一个专为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态。
这个状态自管理应用包含以下几个部分：
state，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入导致的状态变化。
image.png
state中保存的就是公共状态, 改变state的唯一方式就是通过mutations进行更改，action只管中间处理，处理完我就给你，你怎么存我不管。
相信你在使用vuex之前也查了不少资料，看了许多理论，是不是依然懵懵的，下面我就用最简单的栗子（也是官网所提供的）以代码的形式来逐一说明：
<div id="app">
<p>{{count}}
<button @click="inc">+</button>
<button @click="dec">-</button>
</p>
</div>
<script>
new Vue({
el:'#app',
data () {
return {
count: 0
}
},
methods: {
inc () {
this.count++
},
dec () {
this.count--
}
}
})
</script>
也许你会说，这样不是挺好，再使用vuex是不是会显得繁琐？vue就是这样数据是数据，方法是方法，结构清晰，这也是它被受青睐的原因。这只是一个简单的数据处理，当你遇到复杂的数据处理时，vuex就发挥它的优势啦
引入vuex
npm install vuex --save
在main.js中添加
import Vuex from 'vuex'
Vue.use( Vuex );
const store = new Vuex.Store({
//待添加
})
new Vue({
el: '#app',
store,
render: h => h(App)
})
1、State
官方：Vuex 使用单一状态树，用一个对象就包含了全部的应用层级状态。每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。
通俗：state就是Vuex中的公共的状态, 将state看作是所有组件的data, 用于保存所有组件的公共数据。
const store = new Vuex.Store({
state: {
count: 0
},
})
const app = new Vue({
el: '#app',
computed: {
count () {
return store.state.count
}
},
methods: {
inc () {
this.count++
},
dec () {
this.count--
}
}
})
修改完代码之后你可以看到, 将公共数据抽离出来后, 页面没有发生变化。
2、Getter
通俗的理解可以认为是getter里的函数就是vuex里的计算属性
const store = new Vuex.Store({
state: {
count: 0
},
getters: { // getters
countAdd: function (state) {
return state.count++
}
}
})
computed: {
count () {
return store.getters.countAdd
}
},
这时可以看到，数值加1
3、Mutations
官方：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
通俗：将mutaions理解为store中的methods
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
inc: state => state.count++,
dec: state => state.count--
}
})
const app = new Vue({
el: '#app',
computed: {
count () {
return store.state.count
}
},
methods: {
inc () {
store.commit('inc')
},
dec () {
store.commit('dec')
}
}
})
每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：
mutaion: {
inc (state, n) {
state.count += n;
}
}
store.commit('inc', 10);
4、Actions
Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作！！！mutations中绝对不允许出现异步
actions: {
incAsync ({ commit }) {
setTimeout(() => {
commit('inc')
}, 1000)
}
}
5、Modules
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。
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 的状态
网友评论