Vuex 是什么？
Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种预测的方式发生变化。
简单来说
1.集中式存储管理状态
2.一种可预测方式发生变化
什么情况下应该使用 Vuex？
1.多个视图依赖于同一状态
2.来自不同视图的行为需要变更同一状态
read it
开始使用 Vuex
安装 Vuex 模块
npm install vuex --save
作为插件使用
Vue.use(Vuex)
定义容器
const store = new.Vuex.Store({
// your code...
})
注入根实例
new Vue({
el: '#app',
store: store
...
})
Vuex 核心概念
store（仓库）：这是一个容器，它包含着你的应用中大部分的状态，状态存储是响应式的，不能直接改变 store中的状态
state（状态）：定义应用的单一状态树，用一个对象就包含了全部的应用层级状态
store.js
let store = new Vuex.Store({
state: {
count: 110 // 定义一个状态
}
})
hello.vue
<template>
<div>
我是hello组件
<p>{{ n }}</p>
</div>
</template>
<script>
export default {
data () {
return {
n: this.$store.state.count // n的初始值从vuex的state中拿
}
}
}
</script>
getter（派分的状态）：抽离操作状态的逻辑，可被多组件使用
mutation（修改状态的唯一途径）：要使改变转台可被记录，必须要 commit 一个 mutation， mutation必 须使同步更新状态
store.js
let store = new Vuex.Store({
state: {
count: 110 // 定义一个状态
},
mutations: {
updateCount (state, payload) { // 改变state状态的
state.count += payload.add
}
}
})
hello.vue
<template>
<div>
<p>我是hello组件</p>
<p>{{ $store.state.count }}</p>
<button @click="changeCount">改变count</button>
</div>
</template>
<script>
export default {
methods: {
changeCount () {
this.$store.commit ('updateCount', {
add: 30
})
}
}
}
</script>
action（异步操作）：异步操作产生结果，action 提交的是 mutation，而不是直接变更状态
store.js
let store = new Vuex.Store({
state: {
shopList
},
getters: {
totals (state) {
return state.shopList.reduce((n,item)=>n+item.count,0)
}
},
mutations: {
updateCountById (state, payload) {
// 只要提交mutations就有记录，如果mutation中
// 有异步操作，记录的还是之前的值
// 3秒之后改变数值
/*setTimeout(() => {
let item = state.shopList.find(item => item.id == payload.id)
item.count += 1;
}, 3000);*/
let item = state.shopList.find(item => item.id === payload.id)
item.count += 1;
}
},
actions: {
updateCountAction (store, parmas) {
// 异步操作放在这里
setTimeout(() => {
store.commit('updateCountById', parmas)
},3000)
}
}
})
hello.vue
<template>
<div>
Hello Vue
<div :key="item.id" v-for="item in shopList">
<button>-</button>
<span>{{ item.count }}</span>
<button>+</button>
</div>
</div>
</template>
<script>
export default {
computed: {
shopList () {
return this.$store.state.shopList
}
},
methods: {
add (id) {
/* this.$store.commit('updateCountById', {
id
}) */
this.$store.dispatch('updateCountAction', {
id
})
}
}
}
</script>
几个原则
1.每个应用将仅仅包含一个 store 实例
2.更改 store 中的状态的唯一方法是提交 mutation
3.Action 可以包含异步操作
4.Action 提交的是 mutation，而不是直接变更状态
