目录
仓库vuex
一、Vuex简介
1.简介
为了方便实现组件之间的数据共享,Vuex是他们团队借鉴了redux,用来实现vue组件全局状态(数据)管理的一种机制.
2.特点(面试)
能够在vuex中集中管理共享的数据,易于开发和后期维护
能够高效地实现组件之间的数据共享, 提高开发效率
存储在 vuex中的数据都是响应式的,能够实时保持数据与页面的同步
一般情况下,只有组件之间共享的数据,才有必要存储到vuex中;
对于组件中的私有数据,依旧存储在组件自身的data中即可.
3.使用场景
如果你实在不知道开发中什么数据才应该保存到Vuex中,那你就先不用Vuex,需要的时候自然就会想到它
Vuex的官网:
二、引入方式
1.自己下载引入
2.cli脚手架引入
1.手动引入(方法一)
安装:
npm i vuex --save
导入:
import Vuex from "vuex"
Vue.use(Vuex)
创建仓库:
const store=new Vuex.Store({
state:{msg:"我就是所有共享的数据"}
})
把仓库挂载到vm对象:
new Vue({
render(h){return h(app)},
router,
store//挂载以后 所有的组件就可以直接从store中获取全局数据
}).$mount( "#app")
2.引入(方法二)
vue create init
选更多选项
选择Babel、router、vuex、scss、linter
选择2.x
回车
scss
回车
取消lint on save
回车
三、State
1.创建state状态
状态就是那个存数据的对象
const store=new Vuex.store({ state:{msg:"我就是所有共享的数据"} })
2.组件中访问数据
this.$store.state.msg
this.$store.state.msg =“修改” ==>官方不建议使用此方法去修改,应该用官方提供的 mutation
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,//让整个vue项目仓库生效
render: h => h(App)
}).$mount('#app')
router下的index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [{
path: '/',
name: 'home',
component: () => import("../views/home/index.vue")
},
{
path: '/home',
name: 'home2',
component: () => import(