共计 1407 个字符，预计需要花费 4 分钟才能阅读完成。

VUEX 是什么？
用来解决组件之间共用数据问题的一个插件

Vuex 内部结构

State 就是被共用的数据（但是不可以被直接操作，不可以直接访问）
Mutations 可以直接操作（Mutate）State 中的数据，可以定义 State 中的数据如何被改变
Actions 可以触发 Mutations 对 States 的改变，该触发操作专业名词为 commit

Components 与 Vuex 的交互

通过 dispatch Actions 的方式来改变 State
通过 Render 来读取 State 中的数据

Vuex 的使用方法

新建一个 store.js 文件（位置可以自选）

在该文件中引入 vue 和 vuex, 并在 vue 中启用 vuex
Improve vue from ‘vue’
Improve vuex from ‘vuex’
vue.use(vuex)

在该文件中配置 state，mutations，actions
// 这里的 state 是数据实际储存的地方
const state={
count:10
}
const mutations={
add(state,param){
state.count += param
},
reduce(state,param){
state.count -= param
}
}
const actions={
add:({commit},param)=>{
commit(‘add’,param)
},
reduce:({commit},param)=>{
commit(“reduces”,param)
}
}

只有一个 store 配置的方法

将以上配置在 Vuex 对象中实例化并导出
export default new vuex.Store({
state,
mutations,
actions
})

在 main.js 中引用该 vuex 的 store 实例
improt store from ‘./store’
new vue ({
……
store,
……
})

在组件中使用 vuex 的 store 实例在页面中引用该实例 state 的值 $store.state.count 引入该实例的 actions  
import {mapActions} from‘vuex’
export default {
methods:mapActions([‘add’,’reduce’])     
}
页面使用 actions  @click=’add(param)’ @click=’reduce(param)’

有多个 store 配置的方法

将以上配置在 Vuex 对象中实例化并导出
export default new vuex.Store({
module:{
a: {
state,
mutations,
actions
}
}
})

在 main.js 中引用该 vuex 的 store 实例
improt store from ‘./store’
new vue ({
……
store,
……
})

在组件中使用 vuex 的 store 实例在页面中引用该实例 state 的值 $store.state.a.count 调用该实例的 actions  
import {mapActions} from‘vuex’
export default {
methods:mapActions(‘a’,[‘add’,’reduce’])     
}
页面使用 actions  @click=’add(param)’ @click=’reduce(param)’

这篇笔记主要是本人学习 Vuex 时候的知识总结，如果有不对的地方还请多多斧正

共计 3075 个字符，预计需要花费 8 分钟才能阅读完成。

每一个 Vuex 应用的核心就是 store。store 基本上就是一个容器，它包含着你的应用中大部分的状态。vuex 和单纯的全局对象有以下两点不同：
1.Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit)mutation。这样使得我们可以方便的跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好的了解我们的应用。
// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)
const store = new Vuex.Store({
state:{
count:0
},
mutations:{
increment(state){
state.count++
}
}
})
现在可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更：
store.commit(‘increment’)
console.log(store.state.count)//1
再次强调，我们通过提交 mutation 的方式，而非直接改变 store.state.count, 是因为我们想要更明确地追踪到状态的变化。这个简单的约定能够让你的意图更加明显，这样你在阅读代码的时候更容易地解读应用内部的状态改变。此外，这样也让我们有机会去实现一些能记录每次状态改变，保持状态快照的调试工具。
state
Vuex 使用单一状态树，用一个对象就包含了全部的应用层级状态。至此它便作为一个唯一数据源而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。
// 创建一个 Counter 组件
const Counter = {
template:`<div>{{count}}</div>`,
computed:{
count(){
return store.state.count
}
}
}
每当 store.state.count 变化的时候，都会重新求取计算属性，并且触发更新相关联的 DOM。然而，这种模式导致组件依赖全局状态单例。在模块化的构建系统中，在每个需要使用 state 的组件中需要频繁地导入，并且在测试组件时需要模拟状态。Vuex 通过 store 选项，提供了一种机制将状态从根组件注入到每一个子组件 (需要调用 Vuex.use(Vuex));
const app = new Vue({
el:’#app’,
// 把 store 对象提供给 store 选项，这可以把 store 的实例注入所有的子组件。
store,
components:{Counter},
template:`
<div class=”app”>
<counter></counter>
</div>
`
})
通过在根实例中注册 store 选项，该 store 实例会注入到根组建下的所有子组件中，且子组件能通过 this.$store 访问到。让我们更新下 Counter 的实现：
const Counter = {
template:`<div>{{count}}</div>`,
computed:{
count(){
return this.$store.state.count
}
}
}
mapState 辅助函数当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮我们生成计算属性:mapState 函数返回的是一个对象。
// 再单独构建的版本中辅助函数为 Vuex.mapState
import {mapState} from ‘vuex’
export default{
computed:mapState({
// 箭头函数可以使代码更简练
count:state=>state.count,
// 传字符串参数‘count’等同于 state=>state.count
countAlias:’count’,
// 为了能够使用 this 获取局部状态，必须使用常规函数
countPlusLocalState(state){
return state.count+this.localCount
}
}),
// 当映射的计算属性的名称于 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。
computed:mapState([
// 映射 this.count 为 store.state.count
‘count’
])
// 使用对象展开运算符与 computed 混合使用。
computed:{
loacalComputed(){},
// 使用对象展开运算符将此对象混入到外部对象中
…mapState({
//…
})
}
}
Getter
有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并技数：Vuex 允许我们在 store 中定义 getter(可以认为是 store 的计算属性)。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
const store = new Vuex.store({
state:{
todos:[
{id:1,text:’…’,done:true},
{id:2,text:’…’,done:false}
]
},
getters:{
doneTodos:state=>{
return state.todos.filter(todo=>todo.done)
}
}
})
通过属性访问 Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值：
store.getters.doneTodos//[{id:1,text:’…’,done:true}]
getter 也可以接受其它 getter 作为第二个参数：
getters:{
//…
doneTodosCount:(state,getters)=>{
return getters.doneTodos.length
}
}
我们可以很容易地在任何组件中使用它：
computed: {
doneTodosCount () {
return this.$store.getters.doneTodosCount
}
}
通过方法访问：
getters:{
//…
getTodoById:(state)=>(id)=>{
return state.todos.find(todo=>todo.id === id)
}
}
store.getters.getTodoById(2)//{id:2,text:’…’,done:false}
注意，getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。mapGetters 辅助函数 mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：
import {mapGetters} from ‘vuex’
export default{
//…
computed:{
// 使用对象展开运算符 getter 混入到 computed 对象中
…mapGetters([
‘doneTodosCount’,
‘anotherGetter’
])
}
}
如果你想将一个 getter 属性另取一个名字，使用对象形式：
mapGetters({
// 把 this.doneCount 映射为 this.$store.getters.doneTodosCount
doneCount:’doneTodosCount’
})