甜橘子，专注成都网站制作网站设计与营销型网站建设与优化
QQ :532337155
电话：028-86922220
这篇文章主要为大家展示了vuex怎么快速上手，内容简而易懂，希望大家可以学习一下，学习完之后肯定会有收获的，下面让小编带大家一起来看看吧。
成都创新互联公司不只是一家网站建设的网络公司；我们对营销、技术、服务都有自己独特见解，公司采取“创意+综合+营销”一体化的方式为您提供更专业的服务！我们经历的每一步也许不一定是最完美的，但每一步都有值得深思的意义。我们珍视每一份信任，关注我们的成都网站建设、成都网站制作质量和服务品质，在得到用户满意的同时，也能得到同行业的专业认可，能够为行业创新发展助力。未来将继续专注于技术创新，服务升级，满足企业一站式全网整合营销推广需求，让再小的品牌网站建设也能产生价值！
引入
//store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {...},
mutations: {...},
actions: {...}
})
export default store
//main.js
...
import store from './store'
Vue.prototype.$store = store
const app = new Vue({
store,...
})
...
//test.vue 使用时：
import {mapState,mapMutations} from 'vuex'State篇
state更新实时渲染是基于==computed==这个计算属性的,直接赋给data只能赋值初始值，不会随着state改变实时渲染
export default {
data() {
return {
name:this.$store.state.name,
};
},
}{{name}}export default { computed: { name() { return this.$store.state.name; } }, }
注意： data中的变量如果和computed中的变量重名,data优先，注意命名
获取多个state值，写多个函数return,很繁琐，所以有==mapState==辅助函数
export default {
computed: {
token(){
return this.$store.state.token;
}，
name(){
return this.$store.state.name;
}
},
}
import { mapState } from 'vuex'
export default {
computed: mapState([
'token'，
'name'
])
}我们有局部计算，怎么和mapState一起用？
import { mapState } from 'vuex'
export default {
computed:{
getTime(){
return 123;
},
...mapState([
'token'，
'name'
])
}
}我们为它起个别名
xiaokeai,dahuilang是我们取的别名 token,name是state的值 {{xiaokeai}}
我们要state和data发生点什么
假如token的值123; balabala的值就是 123皮卡皮 {{balabala}}
取个对象值怎么破？
{{daSon}} {{xiaoSon}}
这种方式取对象写到业务里不直观,也不共用,下节==Getter==有更优的方案
Getter篇
Getter是针对state的【对象】值提前做一些处理，以便用的时候直接提取
可以 this.$store.getters.xxx 使用,也可以使用mapGetters辅助函数，==辅助函数注意：== 和state一样，注入在computed中
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
obj: {
yeye: {
baba: {
daSon: "老大",
xiaoSon: "老二"
}
}
}
},
getters: {
getson: state => {
return state.obj.yeye.baba;
}
}
})
export default store
{{getson}}
Mutation篇
操作： this.$store.commit("名字","值");
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
token: "vuex的token",
},
mutations: {
setToken(state, val) {
state.token = val;
}
}
})
export default storemapMutations 辅助函数，和state一样，可以别名， ==注意：== 辅助函数注入在methods中
methods: {
...mapMutations([
'setToken'
])
}
this.setToken(100); //token修改为100Mutation 必须是同步函数，不要误解这句话，以为异步不能用，异步可以用在里面，视图的渲染，取值都没有问题，问题在于：调试的时候，一些浏览器调试插件不能正确监听state。所以方便调试，尽量将异步写入action中
Action篇
注意action的 参数不是 state ,而是context，context里面包含commit,state。基本操作：this.$store.dispatch("函数名","值")
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
import { mapActions } from 'vuex'
export default {
methods: {
...mapActions([
"increment"
])
}
}
this.increment(123);module篇
module 目的将store按功能拆分成多个文件，利于维护管理，module 分为2种情况，1.是有命名空间， 2.是没有命名空间
没有命名空间： action、mutation 和 getter 是注册在全局的，所以要注意，方法函数不要设置同名了，如果同名了会都执行。
stete例外是局部。
import Vue from 'vue';
import Vuex from 'vuex';
import moduleA from "./modules/cat.js";
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
token: "vuex的token",
},
modules:{
moduleA
}
})
export default store;
export default {
// namespaced: true,
state: {
cat:"我是cat",
},
mutations: {
setCat(state, val) {
state.cat = val;
}
},
actions: {
},
getters: {
}
};无命名空间 取值
this.$store.state.moduleA.cat
或者
...mapState({
cat:state=>state.moduleA.cat,
}),
不可以(state是局部，不可以这么取)：
...mapState([
"cat"
]),无命名空间 改变值
和原来一样，因为方法是注册在全局的
this.$store.commit("setCat",666);
或者
...mapMutations([
"setCat"
])有命名空间： state, action、mutation 和 getter 是局部的，模块间命名互相不冲突，可以重名。
namespaced 设置为true,即可开启
export default {
namespaced: true,
state: {
cat:"我是cat",
}
}有命名空间取值
this.$store.state.moduleA.cat
或者
...mapState("moduleA",[
"cat"
])有命名空间 改变值
...mapMutations("moduleA",[
"setCat"
])
this.setCat(888);
或者：
this.$store.commit("moduleA/setCat",666);最后 plugins
vuex页面刷新会丢失数据，用vuex-persistedstate插件可解决
import createPersistedState from "vuex-persistedstate";
const store = new Vuex.Store({
state: {},
mutations: {},
actions: {},
getters: {},
modules:{},
plugins: [
createPersistedState({
storage: window.sessionStorage
})
]
})
export default store以上就是关于vuex怎么快速上手的内容，如果你们有学习到知识或者技能，可以把它分享出去让更多的人看到。