Vuex ----超简单详细使用手册
之前在项目用到过Vuex,但用的时候都是前辈写好的结构,知其然而不知所以然,看了几篇博客以及官网的内容打算小小的整理一下,首先来抛玉引砖,推荐几个我觉得通俗易懂的博客:未将状态使用Modules进行表达的:https://blog.csdn.net/u011068996/article/details/80216154使用Modules进行表达的:https://segmentfa...
之前在项目用到过Vuex,但用的时候都是前辈写好的结构,知其然而不知所以然,看了几篇博客以及官网的内容打算小小的整理一下,首先来抛玉引砖,推荐几个我觉得通俗易懂的博客:
- 未将状态使用Modules进行表达的:https://blog.csdn.net/u011068996/article/details/80216154
- 使用Modules进行表达的:https://segmentfault.com/a/1190000009404727
- 当然官网也很重要,虽然没有中文的但是可以翻译成中文页面(中英对照着看不然理解会有偏差):https://vuex.vuejs.org/
(以下实际例子以vue-cli为背景进行)
Vuex(作用就是全局变量状态管理)
(1)什么都不说这个是真的重要:
(2)与全局变量的区别
vuex的state状态可以理解为响应式的双向改变;其次,其状态必须通过提交mutations进行改变
Vuex基本知识点指南(基本官网前几节)
(本来相把原xmind文件附上,但是下载需要积分币,没必要下载,给大家省点吧)
注意:.getters的第三个参数rootState,可进行跨模块调用state;
.state 是会根据组合时模块的别名来添加层级的【归于根state】,后面的 getters,mutations ,actions 都是合并在 store 下
.getters不可重名,重名报错;mutations与actions可重名,且重名访问时按照模块引入顺序依次触发
Vuex非模块使用实战
- 安装:npm install vuex --save
- main.js中引入
....
import store from './store'
....
new Vue({
el: '#app',
router,
store, //此处声明
components: { App },
template: '<App/>'
})
- src下建立store文件夹并建立index.js,内容如下:
import Vue from 'vue'
import Vuex from 'vuex'
//注册vuex到vue中
Vue.use(Vuex)
//你的内容
const state={
isLogin:false,
a:2,
b:3
}
const getters = {
getlogin:(state)=>{
return state.a+state.b
}
}
const actions = {
almuta({ commit, state },loginState){
commit('alterLogin',loginState)
}
}
const mutations = {
alterLogin(state,loginState){
state.isLogin=loginState
}
}
//vuex实例输出
export default new Vuex.Store({
state,
getters,
actions,
mutations
})
- 组件中的访问(非map方式)
html部分:
<button class="confirmbtn" v-if="isLogin" @click="billlogin">登录</button>
<button @click="almuta(true)">actiontest</button>
<button @click="alstate(false)">mutationtest</button>
<button class="maybtn"><router-link to="/register">注册{{getlogin}}</router-link></button>
scritp部分:
computed:{
isLogin:function(){ return this.$store.state.isLogin },
getlogin:function(){ return this.$store.getters.getlogin}
}
methods:{
almuta(opt){
this.$store.dispatch('almuta',opt)
},
alstate(opt){
this.$store.commit('alterLogin',opt)
}
}
Vuex模块使用实战
1.安装【同上】
2.main.js中引入【同上】
3.src下store目录结构
各个文件内容:
// index.js
import Vue from 'vue'
import Vuex from 'vuex'
import common from './modules/common'
Vue.use(Vuex)
export default new Vuex.Store({
modules:{
common
}
})
//common.js
const state={
isLogin:false,
a:2,
b:3
}
const getters = {
getlogin:(state)=>{ //此处有第三个参数根state,只写了一模块就不赘述了
return state.a+state.b
}
}
const actions = {
almuta({ commit, state },loginState){
commit('alterLogin',loginState)
}
}
const mutations = {
alterLogin(state,loginState){
state.isLogin=loginState
}
}
export default{
namespaced: true,
state,
getters,
actions,
mutations
}
4.组件访问(map方式演示):
//html部分
<div class="formbtn">
<button class="confirmbtn" v-if="isLogin" @click="billlogin">登录</button>
<button @click="almuta(true)">okok</button>
<button class="maybtn"><router-link to="/register">注册</router-link></button>
</div>
//script部分
import {login} from '../assets/js/api'
import { mapMutations, mapState , mapActions,mapGetters } from 'vuex'
export default {
computed:{
...mapState({
isLogin: state => state.common.isLogin
}),
...mapGetters('common',{
getlogin:'getlogin'
})
},
mounted(){
console.log(this.getlogin)
},
methods:{
...mapMutations('common',{
alterLogin:'alterLogin'
}),
...mapActions('common',{
almuta:'almuta'
})
}
}
map方式知识点:。mapState , mapGetters使用在computed,形成组件的data数据供后续使用
。mapMutations , mapActions 在methods,形成方法供后续使用
。mapMutations , mapActions , mapGetters三者首个参数是所属模块,后边是所需要调用的对应处理
。mapState中状态量获取时为:state.所属模块.状态名
更多推荐
所有评论(0)