组件传值
组件建共享数据(Vuex)
1、state
(1)、放置所有的公共状态的属性
(2)、定义
const store=new Vuex.Store({
state:{
count:0
},
})
(3)、使用
原始形式:
主键可以使用 this.$store获取Vuex中的store对象实例
{{$store.state.count}}
2、mutations
每个mutations方法都有对应参数
(1)、state指的是当前Vuex中对应的state
(2)、payload 载荷 提交mutations方法是传递的参数,它可以是任何形式
const store=new Vuex.Store({
state: {
count:10,
},
mutations:{
// addCount(state){
// state.count+=1 ;
// },
addCount(state,payload){
state.count+=payload ;
},
},
})
methods:{
// commit 参数一:方法名 参数2:参数
// test(){
// this.$store.commit('addCount')
// },
test(){
this.$store.commit('addCount', 10)
},
},
3、actions
const store=new Vuex.Store({
state: {
count:10,
},
mutations:{
// addCount(state){
// state.count+=1 ;
// },
addCount(state,payload){
state.count+=payload ;
},
},
actions:{
//一个参数 context相当于this.$store
//第二个参数为传的参数
get(context,params){
context.commit('addCount',params)
}
},
})
test1(){
this.$store.dispatch('get', payload)
}
4、getters
5、modules
const store=new Vuex.Store({
state: {
count:10,
},
mutations:{
// addCount(state){
// state.count+=1 ;
// },
addCount(state,payload){
state.count+=payload ;
},
},
actions:{
//一个参数 context相当于this.$store
//第二个参数为传的参数
get(context,params){
context.commit('addCount',params)
}
},
getters:{
},
modules:{
//用户模块
user:{
state:{
token:"123"
}
,
}
}
})
取值:this.$store.state.user.token
注:
1、修改state状态必须通过mutations
2、mutations只能执行同步代码,例如Ajax、定时器不能在mutations中执行
3、执行异步代码需要通过actions,然后将数据提交给mutations才能完成
4、state状态及共享数据可以在组件中使用
5、组件中可以调用actions
搭建环境
一、建立脚手架
vue create demo
报错1:
报错原因:
没有安装脚手架vue-cli
解决方法:安装脚手架vue-cli
npm install -g vuex@3
报错2:
解决办法
1.开始处搜索powershell,以管理员的身份运行
2.然后输入下面的指令:set-ExecutionPolicy RemoteSigned
二、引入Vuex
安装运行时依赖
npm i vuex --save
在main.js中引入
import Vuex from 'vuex'
Vue.use(Vuex) //注册Vuex的功能 Vue.use的方法实际是调用 Vuex 中的install
const store=new Vuex.Store({})
new Vue({
render: h => h(App),
store,
}).$mount('#app')