vuex的几种常用方法

1. vuex安装

安装vuex（uniapp跳过）

npm install vuex

2. 无getters实现

主仓

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

Vue.use(Vuex)
import user from './modules/index.js'
const store = new Vuex.Store({
	modules: {
		user,
	}
})

export default store

子仓

下面是一个uniapp的免登陆的一部分

import store from '../index.js'

const state = {
	user: {}
}
const actions = {
	loginByUser({commit},provide){
		uni.getStorage({
			key:"user",
			success:(res => {
				commit("LOGIN_BY_USER",res.data)
			})
		})
	}
}
const mutations = {
	CHANGE_USER(state, provide) {
		state.user = provide
		uni.setStorage({
			key:"user",
			data:state.FrdMsglist
		})
	},
	LOGIN_BY_USER(state, provide) {
		state.user = provide
	},
}

export default {
	mutations,
	state,
	actions
}

vue中没有uni.getStorage进行持久化，这里可以使用good-storage

npm install good-storage

//在这里可以进行预置一些东西
import storage from 'good-storage'
function insert(key, val) {
  let ss = storage.get(key)
  ss.status = val;
  storage.set(key,ss)
  if (typeof storage.get(key) != 'undefined') {
    return true
  }
  return false
}
function select(key) {
  return {'val': storage.get(key), 'key': key};
}

function remove(key) {
  if (typeof storage.get(key) == 'undefined') {
    return "null"
  }
  storage.remove(key);
  if (typeof storage.get(key) == 'undefined') {
    return true
  }
  return false
}
export {
  insert,
  select,
  remove,
}

使用

方法一： 使用mapActions、mapMutations就可以直接调用

<script>
	import {mapMutations,mapActions,mapState} from 'vuex'
	export default {
		onLaunch: function() {
			this.loginByUser()
			//let user = {id:'123',name:'哈哈'}
			//this.CHANGE_USER(user)
		},
		onShow: function() {
		},
		onHide: function() {
			
		},
		computed:{
			...mapState({
     			user: (state) => state.user.user,//是不是感觉像getters,第一个user是子库，第二个user是值
    		})
		},
		methods:{
		...mapMutations(['loginByUser']),
		...mapActions(['CHANGE_USER'])
		}
	}
</script>

方法二

<script>
	export default {
		onLaunch: function() {
			this.loginByUser()
			//let user = {id:'123',name:'哈哈'}
			//this.CHANGE_USER(user)
		},
		onShow: function() {
		},
		onHide: function() {
			
		},
		computed:{
		},
		methods:{
			login(){
				let user = {id:'123',name:'哈哈'}
				this.$store.commit("CHANGE_USER",user) //调用mutations中的函数
				this.$store.dispatch('loginByUser')//调用actions中的函数
				this.user = this.$store.state.user.user //调出state中的值
			}
		}
	}
</script>

getters

getters文件

const getters = {
  user: state => state.modules.user,
}
export default getters

主仓

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)

const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

const store = new Vuex.Store({
  modules,
  getters
})

export default store

子仓与上面一样

使用

<script>
	export default {
		onLaunch: function() {
			this.loginByUser()
			//let user = {id:'123',name:'哈哈'}
			//this.CHANGE_USER(user)
		},
		onShow: function() {
		},
		onHide: function() {
			
		},
		computed:{
		},
		methods:{
			login(){
				this.user = this.$store.getters.user //调出state中的值
			}
		}
	}
</script>

getters的封装只是对于state中的值进行从新赋值，在调用actions和mutations中没有明显变化
uni.getStorage与good-storage进行数据持久化时，要注意，添加的时候如果已经存在，则直接替换value值