1.引入vuex
npm install vuex@3.6.2 --save
2.在src目录下创建store文件夹,下面创建store.js
//引入vue和Vuex
import Vue from 'vue'
import Vuex from 'vuex'
//引入之后,对vuex进行引用
Vue.use(Vuex)
//创建且声明一个对象
export const store = new Vuex.Store({
state:{
testdata:"3333", //数据
},
mutations:{//修改
settestdata(state,newVal){
state.testdata=newVal
}
},
getters:{
gettestdata(state){
return state.testdata
}
}
})
export default store
3.main.js文件
import {store} from './store/store'
new Vue({
el: '#app',
store:store,//使用store
router,
components: { App },
template: ''
})
4.vue页面中使用
created(){
console.log(this.$store.state.testdata)
this.$store.commit('settestdata',"44444444444")
console.log(this.$store.state.testdata)
console.log(this.$store.getters.gettestdata)
}
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)