在main.js中注册
// vue2的vuex
// #ifdef VUE3
import store from './store/index.js'
import {
createSSRApp
} from 'vue'
export function createApp() {
const app = createSSRApp(App)
app.use(store)
return {
app
}
}
// #endif
创建一个store的文件夹 创建 index.js的store文件
// 页面路径:store/index.js
import {
createStore
} from 'vuex'
const store = createStore({
state: { //存放状态
"username": "foo",
"age": 18,
"cart": ['迪丽热巴'],
todos: [{
id: 1,
text: '我是内容一',
done: true
},
{
id: 2,
text: '我是内容二',
done: true
}
],
count: 1
},
// 计算属性
getters: {
// 过滤掉false 留下done为true的项
doneTodos: state => {
return state.todos.filter(todo => todo.done)
},
// 得到true的长度 1
doneTodosCount: (state, getters) => {
//state :可以访问数据
//getters:访问其他函数,等同于 store.getters
return getters.doneTodos.length
},
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
},
// 方法 Vuex中store数据改变的唯一方法就是mutation
mutations: {
add(state, step) {
// 变更状态
state.count += step
},
// add(state, payload) {
// // 变更状态
// state.count += payload.amount
// },
addToCart(state, goods) {
// 根据提交的商品的Id,查询购物车中是否存在这件商品
// 如果不存在,则 findResult 为 undefined;否则,为查找到的商品信息对象
const findResult = state.cart.find((x) => x.goods_id === goods.goods_id)
if (!findResult) {
// 如果购物车中没有这件商品,则直接 push
state.cart.push(goods)
} else {
// 如果购物车中有这件商品,则只更新数量即可
findResult.goods_count++
}
}
}
})
// 导出这个实例
export default store
在页面中使用
<!-- view 视图-->
<template>
<view>
<view v-for="(item,index) in doneTodos" style="border: 1px solid red;">
<view>{{item.id}}</view>
<view>{{item.text}}</view>
<view>{{item.done}}</view>
</view>
我是长度 {{doneTodosCount}}
<button @click="increment(10)"> dwa</button>
<view>
<view>数量:{{count}}</view>
<button @click="addCount">增加</button>
</view>
</view>
</template>
<script>
import store from '@/store/index.js'
// 计算属性
import {
mapGetters
} from 'vuex' //引入mapGetters
// 数据
import {
mapState
} from 'vuex' //引入mapState
// 方法
import {
mapMutations
} from 'vuex' //引入mapMutations
export default {
// state 数据源
data() {
return {
count: 0
}
},
// actions 控制状态变化
methods: {
increment(num) {
this.count += num
}
},
computed: {
// 使用对象的展开运算符 将getter混入computed对象中
...mapGetters([
'doneTodos',
'doneTodosCount',
]),
count() {
return this.$store.state.count
}
},
methods: {
// 调用store中的方法 得到commit
addCount() {
store.commit('add', 85)
// store.commit('add', {
// amount: 10
// })
// store.commit({
// // type是调用的方法名称
// type: 'add',
// // 传递的参数
// amount: 100
// })
},
// ...mapMutations(['add', 50]) //对象展开运算符 直接拿到add方法
}
}
</script>
<style lang="scss">
</style>