1.概念
在Vue實現集中式狀態(數據)管理的一個插件,對Vue中多個組件的共享狀態進行集中式的管理(讀/寫),也是一種組件間的通信方式,適用于任意組件間的通信
2.使用場景
多個組件需要共享數據時
3.搭建Vuex環境
- 創建文件
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
})
- 在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,...
})