vuex 状态管理模式
采用集中式存储管理应用的所有组件状态
npm i vuex -S
创建stroe文件夹，index.js文件
import { createStore } from 'vuex'
const store = createStore({
state:()=>{//定义数据
return {
msg:'嘿嘿',
count:10
}
},
mutations:{
},
actions:{
},
getters:{
},
modules:{
}
})
export default store
在main.js中
import store from './store/index'
createApp(App).use(store).mount('#app')
state，放数据
actions，放提交方法
mutations，放方法
getters，当computed计算属性使用
modules，包含上面四个，另起一个模块
- 放栗子
store下的index.js文件
import { createStore } from 'vuex'
const store = createStore({
state: () => {//定义数据
return {
msg: '嘿嘿',
count: 10,
price: 100
}
},
actions: {
asyncAdd(context) {
context.commit('add')//向mutations提交方法
},
asyncMsg(context, txt) {
context.commit('changemsg', txt)
},
asyncAdd2({ commit }) {//结构语法，直接解构commit使用
commit('add2')
}
},
mutations: {
add(state) {//执行方法，state是当前state定义的数据
state.count++
},
changemsg(state, txt) {
state.msg = txt
},
add2(state) {
state.count--
}
},
getters: {//相当于computed计算属性
getCount(state) {//在使用时，把方法名当属性用就行
return state.count * state.price
}
},
modules: {
}
})
export default store
news.vue文件
<template>
<div>
<h1>news组件</h1>
<!-- 直接使用方式 -->
{
{ $store.state.msg }}
<input type="text" placeholder="输入内容替换文本" v-model="txt" />
<button @click="changemsg(txt)">点击切换msg信息</button>
{
{ $store.state.count }}
<button @click="delCount">count--</button>
</div>
</template>
<script setup>
import { ref } from "vue";
import { useStore } from "vuex";
const txt = ref();
//js使用方式
const store = useStore();
const changemsg = (txt) => {
//store.dispatch('第一个参数是actions里定义的方法名字'，'第二个参数是传递数据')
store.dispatch("asyncMsg", txt);//向actions提交方法名，数据
};
const delCount = () => {
store.dispatch("asyncAdd2");
};
</script>
<style lang="scss" scoped>
</style>
home.vue
<template>
<div>
<h1>home组件</h1>
msg-- {
{ $store.state.msg }}<br />
count--{
{ $store.state.count }}<br />
price--{
{ $store.state.price }}<br />
count*price={
{ $store.getters.getCount }}
<button @click="addCount">count++</button>
</div>
</template>
<script setup>
import { useStore } from "vuex";
const store = useStore();
const addCount = () => {
store.dispatch("asyncAdd");
};
console.log(store.getters.getCount);
</script>
<style lang="scss" scoped>
</style>
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/router-index'
import store from './store/index'
createApp(App).use(store).use(router).mount('#app')
router下的router-index.js
import { createRouter,createWebHashHistory } from 'vue-router'
import Home from '../views/home/home.vue'
import News from '../views/news/news.vue'
const router = createRouter({
history:createWebHashHistory(),
routes:[
{
path:'/home',
name:'home',
component:Home
},
{
path:'/news',
name:'news',
component:News
},
]
})
export default router
app.vue文件
<template>
<div>
<router-link to="/home">前往home</router-link>
<router-link to="/news">前往news</router-link>
<router-view></router-view>
</div>
</template>
<script setup>
</script>
<style scoped>
</style>
pinia
store文件夹index.js文件
import { createPinia } from 'pinia'
const pinia = createPinia()
export default pinia
在main.js文件中添加代码
import pinia from './store/index'
app.use(pinia)
store中另起一个文件counter.js
import { defineStore } from 'pinia' // 定义一个pinia的一个模块
//'第一个参数是id标识，pinia的名字'，'第二个参数是个对象'
const useCounterStore = defineStore('counter',{
state:()=>{
return {
count:10,
msg:'菠萝头的使用',
price: 100
}
},
actions:{
add1(){
this.count+=1
},
del1(){
this.count-=1
}
},
getters:{
getCount(state) {//在使用时，把方法名当属性用就行
return state.count * state.price
}
}
})
home组件调用
<template>
<div>
<h1>home组件</h1>
msg-- {
{ counterStroe.msg }}<br />
count--{
{ counterStroe.count }}<br />
price--{
{ counterStroe.price }}<br />
count*price={
{ counterStroe.getCount }}
<button @click="addCount">count++</button>
</div>
</template>
<script setup>
import { useCounterStroe } from "../../store/counter";
const counterStroe = useCounterStroe();
const addCount = ()=>{
counterStroe.add1();
}
console.log(counterStroe);
</script>
<style lang="scss" scoped>
</style>
news组件，解构写法
<template>
<div>
<h1>news组件</h1>
msg-- {
{ msg }}<br />
count--{
{ count }}<br />
price--{
{ price }}<br />
count*price={
{ counterStroe.getCount }}
<button @click="delCount">count--</button>
</div>
</template>
<script setup>
import { storeToRefs } from 'pinia'//引入解构保持响应式的工具
import { useCounterStroe } from "../../store/counter";
const counterStroe = useCounterStroe();
const {msg,count,price} = storeToRefs(counterStroe)//解构
const delCount = ()=>{
counterStroe.del1();
}
console.log(msg.value);
console.log(count.value);
console.log(price.value);
</script>
<style lang="scss" scoped>
</style>