vuex的快速使用

vuex的快速使用

1.首先创建一个大仓库store然后再把每个组件的数据放在一个小仓库

首先确保安装了vuex,根目录创建store文件夹，文件夹下创建index.js，内容如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

//对外暴露store的一个实例
export default new Vuex.Store({
    state:{},
    mutations:{},
    actions:{},
    
})

如果想要使用vuex，还要再main.js中引入
main.js:
(1) 引入文件
(2) 注册store

import store from './store'
new Vue({
  render: h => h(App),
  //注册路由，此时组件中都会拥有$router $route属性
  router,
  //注册store,此时组件中都会拥有$store
  store
}).$mount('#app')

2.取出仓库的数据

computed: {

  ...mapState(["user", "login"]),

 }

拿到数据就可以使用了