1.在项目根目录创建store/index.js文件:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex Store({
state:{name:'张三'},
mutations:{
setName(state,names){state.name = names}
},
actions:{
setNmaeSync(context,second){
setTimeout(()=>{
context.commit('setName',second)
},2000)
}
},
modules:{}
})
export default store
2.main.js引入:
import store from '@/store/index'
const app = new Vue({ ...App, store })
app.$mount()
3.在页面中使用 state , mutations, actions 两种方法
一、this.$store.state.name 获取
this.$store.commit('setName','李四') 修改
this.$store.dispatch('setNmaeSync','王五') 2秒后修改
二、import {mapState,mapMutations,mapActions} from 'vuex'
computed:{
...mapState(['name'])
},
methods:{
...mapMutations(['add:setName']) this.add()
...mapActions(['setNmaeSync'])
}
4.modules 使用
modules/user.js 文件:
store/index.js使用：
import user from './modules/user'
modules：{user}
namespaced : true 解决变量，方法名字一样问题
页面使用方法：
this.$store.state.user.blist 获取
使用同步方法
