npm i vuex --save-dev
创建store文件——>index.js:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
例子
//创建一个store仓库
const store = new Vuex.Store({
//state用来存放数据的对象
state:{
//初始值、存放的东西
title:'商城'
},
//定义取数据
getters:{
// title:function(state){
// return state.title;
// }
title:state=>state.title,
}
})
export default store;
挂载
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';//仓库
new Vue({
el: '#app',
router,
store,
render: h => h(App)
});
在组件中获取store的
import{mapGetters} from 'vuex'
computed:{
//...mapGtters();获取仓库里的所有store值
//获取仓库里的title
...mapGetters(['title']),
//如果还有其它的值
//...mapGetters(['title','demo'])
}
使用
{{title}}
存数据
例子
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
//创建一个store仓库
const store = new Vuex.Store({
//state用来存放数据的对象
state:{
//初始值、存放的东西
title:'商城'
},
//定义取数据;;;;用来操作修改state的
getters:{
// title:function(state){
// return state.title;
// }
title:state=>state.title,
},
//存数据
mutations:{
updateTitle:(state,payload)=>{
//state.title='新值'
state.title='payload'
}
}
})
export default store;
使用
this.$store.commit('updateTitle','这是随便写的内容');
{{title}}
actions:{
//用来向mutations发指令的（mutations负责干活，actions是指挥mutations干活的，项目里有些人用actions有些不用）
}
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
//创建一个store仓库
const store = new Vuex.Store({
//state用来存放数据的对象
state:{
//初始值、存放的东西
title:'商城'
},
//定义取数据
getters:{
// title:function(state){
// return state.title;
// }
title:state=>state.title,
},
//存数据
mutations:{
updateTitle:(state,payload)=>{
//state.title='新值'
state.title='payload'
}
},
//
actions:{
updateTitle:({commit},payload)=>{
commit('updateTitle',payload);
}
}
})
export default store;
使用
dispatch//派发，发出一个命令
created(){
this.$store.dispath('updateTitle','这是随便写的内容')
}
使用
{{title}}
