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 时候的知识总结，如果有不对的地方还请多多斧正