目录结构
1.index.js
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/cart.js'
import screen from './modules/products.js'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
username: '',
age: 0,
// 页面中通过this.$store.state.username
/*
在页面中,当一个组件需要获取多个状态的时候,
将这些状态都声明为计算属性会有些重复和冗余。
为了解决这个问题,使用 mapState 辅助函数 帮助我们生成计算属性,让你少按几次键:
computed:
...mapState({
// 从state中拿到数据 箭头函数可使代码更简练
username: state => state.username,
'username',//映射 this.username 为 store.state.username
age: state => state.age,
// 页面的data中,firstName:"Li"
为了能够使用 this 获取组件自己的data数据,必须使用常规函数。
username: function (state)
{
return this.firstName + ' ' + state.username
},
})
*/
todos: [{
id: 1,
done: true
},
{
id: 2,
done: false
}
]
},
// 相当于计算属性,getter 返回的值会根据它的依赖被缓存起来,
// 且只有当它的依赖值发生改变才会被重新计算
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
},
doneTodosCount: (state, getters) => {
//state :可以访问数据
//getters:访问其他函数,等同于 store.getters
return getters.doneTodos.length
},
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
},
/* 页面中
<view v-for="(item,index) in todos">
<view>{{item.id}}</view>
<view>{{item.text}}</view>
<view>{{item.done}}</view>
</view>
computed: {
todos() {
return this.store.getters.doneTodos
return this.$store.getters.getTodoById(2)
}
}
*/
/*
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性:
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'doneTodos',
'doneTodosCount',
// ...
])
*/
modules: {
cart,
products
},
})
export default store
cart.js (mutations)
import Vue from 'vue'
const state = {
count: 1
}
/*
当需要在对象上添加新属性时,你应该
使用 Vue.set(obj, 'newProp', 123), 或者
以新对象替换老对象。例如,利用对象展开运算符我们可以这样写:
state.obj = { ...state.obj, newProp: 123 }
*/
const mutations = {
/* add */
/* state仓库,payload载荷(额外的参数) */
add(state, payload) {
// state.count += 1
state.count += payload
}
/* 页面中
<view>
<view>数量:{{count}}</view>
<button @click="addCount">增加</button>
</view>
export default {
computed: {
count() {
return this.$store.state.count
}
},
methods: {
addCount() {
store.commit('add')
store.commit('add', 5)//每次累加 5
// 也可以传递一个对象
store.commit('add', { amount: 10 })
store.commit({
type: 'add',
amount: 6
})
}
...mapMutations(['add'])//对象展开运算符直接拿到add
}
}
*/
}
const actions = {
}
export default {
namespaced: true,
state,
mutations,
actions
}
products.js(actions)
import {
http
} from '../../utils/api.js'
const user = {
state: {
count: 1
},
mutations: {
add(state) {
// 变更状态
state.count += 2
}
},
actions: {
// context对象和store具有相同的方法和属性
addCountAction(context) {
context.commit('add')
}
// 参数解构
addCountAction({
commmit
}) {
commit('add')
}
addCountAction(context) {
//在执行累加的时候,会等待两秒才执行
setTimeout(function() {
context.commit('add')
}, 2000)
}
/* addCountAction(context, payload) {
context.commit('add', payload)
}
// 以载荷形式分发
store.dispatch('addCountAction', {
amount: 10
}) */
/*
页面中
methods: {
add () {
store.dispatch('addCountAction')
}
...mapActions([ 'addCountAction', ])
// 将 `this.addCountAction()` 映射为 `this.$store.dispatch('addCountAction')`
add () {
// 以对象形式分发
store.dispatch({
type: 'addCountAction',
amount: 5
})
}
}
*/
/*
// 假设 getData() 和 getOtherData() 返回的是 Promise
actions: {
async actionA ({ commit }) {
commit('gotData', await getData())
},
async actionB ({ dispatch, commit }) {
await dispatch('actionA') // 等待 actionA 完成
commit('gotOtherData', await getOtherData())
}
}
*/
// 退出系统
LogOut({
commit,
state
}) {
return new Promise((resolve, reject) => {
uni.clearStorageSync();
resolve()
})
},
// 登入系统
Login({
commit,
state,
dispatch
}, payload) {
return new Promise((resolve, reject) => {
uni.setStorageSync('token', payload.token);
uni.setStorageSync('userInfo', payload.userInfo);
dispatch('NotReadNum')
resolve()
})
},
// 重定向页面
RedirectPage({
commit,
state,
dispatch
}) {
return new Promise((resolve, reject) => {
if (uni.getStorageSync('redirectPage')) {
uni.reLaunch({
url: uni.getStorageSync('redirectPage'),
fail: () => {
uni.showToast({
title: '跳转失败,请联系管理员',
duration: 2000,
icon: "none"
});
},
complete: () => {
uni.removeStorageSync('redirectPage');
}
})
resolve()
} else {
reject()
}
})
}
}
}
export default user