Vue学习笔记-搭建Vuex

1.概念

在Vue实现集中式状态（数据）管理的一个插件，对Vue中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间的通信方式，适用于任意组件间的通信

2.使用场景

多个组件需要共享数据时

3.搭建Vuex环境

1. 创建文件src/store/index.js

//index.js文件用于创建Vuex中最为核心的store对象
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//actions对象用于响应组件中的动作
const actions = {}
//mutations对象用于操作数据state
const mutations = {}
//用于存储数据
const state = {}
/*
    创建 并导出Store
* (这里的options参数本质上要传入一个键值对对象，但如果键值对的k和v同名，则可以采用简写形式)
    必须先use Vuex，再创建Store
* */
export default new Vuex.Store({
    actions,
    mutations,
    state
})

2. 在main.js文件中引入store，并且为Vue对象传递store对象

...
//引入store,这里文件路径也可以写成 './store'，因为index.js是默认命名方式
import store from './store/index'
Vue.config.productionTip = false;
new Vue({
    el:'#app',
    render: h=>h(App),
    store,
    ...
})