Vuex 使用

最近写了一个项目,用vue-cli分别写了pc端和app端,由于第一次见vue-cli写app,我蛮兴奋的,问了几个智障问题,被同事说你再工作几年就不会这么问了……
根据同事的指导和自我摸索,总结出这份文档。

一。
Store的代码结构一般由state、getters、mutation、actions四个部分组成。state就相当于一个小仓库,所有的数据都放在里面,getter就相当于财务用于计算,mutation相当于管理员只有他才能更改state的数据,actions就相当于一个普通打工人负责把数据传到mutation。
所有他们的顺序应该是这样的:actions -> mutation -> state。

二。
首先当然是安装:npm install vuex --save
参考文件结构:
vuex01.png
然后就是在index.js里面引入

import Vue from 'vue'
import Vuex from 'vuex'

如有其他则导入其他即可。
然后在main.js

import store from './store'
new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

然后我们可以为所欲为了
1.

actions: {
    // 获取app logo
    getAppLogo({ commit }) {
      Vue.prototype.$get('/api/website').then(res => {
        commit('APPLOGO', res.data)
      })
    },
    
  }

这里就是开始获取数据并通过 commit 把数据传给 mutation方法里面,actions提交数据到mutation的方法就是 commit(name,data)

2.

mutations: {
    APPLOGO(state, data) {
      localStorage.setItem('appLogo', JSON.stringify(data))
      state.appLogo = data
    },
  },

这个就是把从actions获取的数据提通过 state.name=data 的方式交到state里面去
两个方法有些类似,commit 和 state 相当于他们数据传输的密码或者同行令牌。

3.好的,数据终于要到state里面了

state: {
    appLogo:(()=>{
      let str = localStorage.getItem('appLogo');
      if(!str) return {}
      return JSON.parse(str);
    })(),
    
  },

这样数据就到了仓库,只要仓库的数据发生改变对应的地方数据也会自己改变。

三。
数据已经放好在仓库里了,当然就是这么用了
如果只是简单粗暴的直接使用的话那就是{{this.$store.state.XXX}}
还有一种写法就是import {mapState} from "vuex",我用的是第二种至于区别你们自己百度吧。
看到 {mapState} 又不禁有个疑问,百度一下就看到State, Mutations,Actions,Getters他们分别有着四个小跟班mapState, mapGetters, mapActions, mapMutations,他们都是辅助函数。
看代码

<script>
import {mapState} from "vuex"
export default {
  name:'XXX',
  data(){
    return {
    }
  },
  computed:{
    ...mapState({
      appLogo:'appLogo',
    }),
  },
}
</script>

在computed内使用...mapState({}) 取出里面的的 appLogo 数据 使用也很简单,直接{{appLogo.name}}

四。
刚刚说的就是在Store里面进行存取一些列操作,现在我们要去页面上把数据存进去,这时候又轮到我刚刚说的辅助函数
mapActions。
使用方法跟上面差不多
vuex02.png
把数据传入actions
在store index.js 文件里面actions

userInfo({commit},data){
      commit('userInfo',data)
    },

以上的步骤也就都差不多了,如果数据不需要放在Local Storage 直接跳过就好了。

pic.jpg

您的大名:
万水千山总是情,给个打赏行不行。 打赏
原创文章,作者:卑微页面仔,如若转载,请注明出处:https://www.ruletree.club/archives/2199/
javascript网页form表单转json对象
« 上一篇 12-04
javascript根据Json数组指定字段进行排序
下一篇 » 12-16

发表评论