vuex 的学习 - 日理万妓 2022-06-01 03:19 196阅读 0赞 ## 1、下载 vuex ## npminstallvuex\-\-save ## 2、接入 vuex ## import Vue from 'vue' import App from './App.vue' import Vuex from 'vuex' ### 3、建一个 store.js 文件, ### ### 开始写 vuex,用到 vuex 的组件都要引入 import store from '....store.js' ### import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); const stase...... export default new Vuex.Store({ //实例化 state : state, mutations : mutations, getters : getters, actions : actions, }) ## 4、state ## state是存数据的地方, const state = { count : 0, todos: [ { id: 1, text: '111', done: true }, { id: 3, text: '333', done: true }, { id: 2, text: '222', done: false } ] } 组件里的调用是 <template> <div id="app"> { {count}} </div> </template> import store from './vuex/store' export default { name: 'app', data () { return { } }, methods:{ }, computed: { count () { return store.state.count // return 回来可直接用 }, }, created(){ }, mounted:function(){ console.log(store.state.count)//也可以直接拿 }, components : { }, store : store } ## 5、mutations ## mutations 里面是改变 state 里的参数或者状态的方法,如: const state = { count : 0, } const mutations = { countAdd (state){ state.count ++ }, countReduce (state){ state.count -- }, countZero (state,n){ //可传 参数 或者 多个参数的对象 var n = n || 0; state.count = n ; }, } export default new Vuex.Store({ state : state, mutations : mutations, }) 调用mutations里面的方法用 store.commit('countReduce') <template> <div> <button @click="countReduce">-1</button> <button @click="countAdd">+1</button> <button @click="countZero">回零</button> </div> </template> <script> import store from '../../vuex/store' export default{ data(){ return { } }, methods:{ countReduce(){ store.commit('countReduce');//减1 }, countAdd(){ store.commit('countAdd') //加1 }, countZero(){ store.commit('countZero',10)//可传参数 } }, } </script> ## 6、getters 计算过滤操作 ## 调用 方法用 store.getters.getTodosId const state = { count : 0, todos: [ { id: 1, text: '111', done: true }, { id: 3, text: '333', done: true }, { id: 2, text: '222', done: false } ] } const getters = { doneTodos : state => { //将筛选对象 todos 的 ID ==1 的数据暴露回去,调用方法 store.getters.doneTodos return state.todos.filter(todo => todo.id==1) }, getTodosId : (state)=>(id)=>{ //页面传参传入ID 作为筛选条件,可传多个 return state.todos.filter(data=>data.id == id) }, doneTodosCount: (state, getters) => { //可以传第二个参数他的父级 getters,其它的不能传 return getters.doneTodos.length }, doneTodosCountID : (state,getters)=>{ return getters.getTodosId(3);//调用 getters 里的 getTodosId 要给方法传入 getters } } 页面调用 methods:{ getters(){ console.log(JSON.stringify(store.getters.doneTodos)) }, doneTodos(){ console.log(JSON.stringify(store.getters.doneTodosCountID )) //或者 console.log(JSON.stringify(store.getters.getTodosId(3))) } }, ## 7、actions ## actions 可以异步修改状态 const actions = { increment ({ commit }) { commit('countZero') }, actionA({commit}){ return new Promise((resolve,reject)=>{ setTimeout(() => { commit('countZero') resolve() }, 1000) }) }, actionB({dispatch,commit}){ //调用同级的 actionA 方法,要 {} 里传进 dispatch return dispatch('actionA').then(()=>{ console.log('我是 actions 方法里的 actionB'); }) }, } 页面调用 store.dispatch('xxx') methods : { ActionClick(){ store.dispatch('actionA').then(()=>{ console.log("sdfsdf") }) }, ActionBClick(){ store.dispatch('actionB') } }, ## 8、modules ## modules 可以把 Store分成模块化一样管理 export default new Vuex.Store({ modules: { a:{ state : state, // 可以把它们分类,分类之后获取 state 数据要在 state 后面加个名字,如: store.state.a.count mutations : mutations, // 但是 : 像 mutations getters actions里的方法都还是 全局的、全局的、全局的、全局的、全局的,可以共用,互相调,还是原来一样调用,不用加名字 a getters : getters, actions : actions, }, b:{ state : state, mutations : mutations, getters : getters, actions : actions, } } })*/ 页面调用 state 里的参数 ,要加上是哪个模块的,如: store.state.a.count store.state.b.count 但是: 像 mutations、getters、actions 里的方法都是合并在一起的,可以相互调用,页面上不加模块怎么调用(上面介绍),现在就怎么调用 ,,详细找 http://blog.csdn.net/rvrnld5t/article/details/55254795
还没有评论,来说两句吧...