State
创建
const state = {
count: 0,
sex: '男',
from: '123',
list: [
{
id: 1, name: 'ohhhh', bol: true},
{
id: 2, name: 'hoooo', bol: false}
]
}
export default {
state
}
调用
this.$store.state.test.count//1
import {
mapState} from 'vuex'//2-1
computed: {
...mapState({
from: function(state) {
return state.test.from
},
sex: (state) => {
return state.test.sex
}
}),
}
//computed内第二种写法
computed: mapState({
//2-2
count: 'count', // 第一种写法(只能state.xxx才能获取)
sex: (state) => state.test.sex, // 第二种写法
count: (state) => state.test.count, // 第二种写法
from: function (state) {
// 用普通函数this指向vue实例,要注意
return this.form.delivery + ':' + state.test.from
},
// 注意下面的写法看起来和上面相同,事实上箭头函数的this指针并没有指向vue实例,因此不要滥用箭头函数,组件的computed中箭头函数this指向undefined
from: (state) => this.str + ':' + state.from
myCmpted: function () {
// 这里不需要state,测试一下computed的原有用法
return '测试' + this.form.one
}
}),
Getters
创建
单独建立getters.js文件夹
const getters = {
count: (state) => {
return state.test.count.toString().length
},
list: (state) => (id) => {
//这里的用法相当于过滤,调用时传入id,匹配与id相等的项
return state.test.list.find(item => item.id === id)
}
}
export default getters
调用
import {
mapGetters} from 'vuex'
computed: {
list() {
return this.$store.getters.list(2)//1
},
...mapGetters({
count : 'count'
}),
...mapGetters([//同名时可省略
'count'
]),
}
Mutation
创建
//一般用大写,下划线命名
const mutations = {
ADD_COUNT: (state,count) => {
//1
state.count += count
},
ADD_COUNT: (state,payload) => {
//2 可以向 store.commit 传入额外的参数,即 mutation 的载荷(payload),例如参数为一个对象
state.count += payload.amount
}
}
export default {
mutations
}
调用
this.$store.commit('ADD_COUNT',100)//1
this.$store.commit('ADD_COUNT',{
amount:100})//2
this.$store.commit({
type:'ADD_COUNT',amount:100})//2
//Mutation 必须是同步函数
//mapMutations
methods: {
//放methods里面
...mapMutations(['ADD_COUNT']),
...mapMutations({
add: 'ADD_COUNT' // 相当于定义了一个add方法,将 this.add() 映射为 this.$store.commit('ADD_COUNT')
}),
}
//然后能直接this调用
this.ADD_COUNT({
amount:10000})
this.add({
amount:10000})
Action
创建
//action可以执行异步操作
const actions = {
changeCount(context) {
//可直接用context的commit来触发mutation
context.commit('ADD_COUNT',123)
setTimeout(() => {
context.commit('ADD_COUNT',123)
}, 1000)
},
changeList({
commit,state,rootState }) {
//也可以把需要的几个参数从context中解构出来
return new Promise((resolve,reject) => {
setTimeout(() => {
commit('CHE_LIST',[
{
id: 1, name: 'ohhhh', bol: true},
{
id: 2, name: 'hoooo', bol: false}
])
resolve(state.list)
}, 2000);
})
}
}
export default {
actions
}
调用
import {
mapActions} from 'vuex'
this.$store.dispatch('changeCount')//1
methods: {
//2
...mapActions(['changeCount']),
...mapActions({
add2: 'changeCount',
changeList: 'changeList'
}),
}
this.changeCount()
this.add2()
导出注意事项
export default {
//导出注意
namespaced: true
}
//或者在modules里面
modules: {
namespaced: true
app,
settings,
user,
tagsView,
test
},
//如果加此设置表示每次调用此模块的内容需要加前缀:'模块/方法'如'test/changList'