main.js
import Vue from 'vue'
import App from './App.vue'
Vue. config. productionTip = false
import { createPinia } from 'pinia'
const pinia = createPinia ( )
Vue. use ( pinia)
new Vue ( {
render: h = > h ( App)
} ) . $mount ( '#app' )
store文件夹下的index.js
import { defineStore } from 'pinia'
import { jspangStore } from './jspang'
export const mainStore = defineStore ( 'main' , {
state : ( ) => {
return {
count : 100 ,
foo : 'bar' ,
phone : '1513933888' ,
xiao : '1'
}
} ,
getters : {
phoneHidden ( state ) {
return state. phone + '你好嘛'
}
} ,
actions : {
add ( ) {
this . count++
} ,
getList ( ) {
this . xiao = jspangStore ( ) . hanglist
}
}
} )
1.组件使用state数据
< template>
< div>
{ { mainstore. phoneHidden } }
{ { mainstore. count } }
{ { mainstore. xiao } }
< / div>
< / template>
< script>
import { mainStore } from '../store/index'
export default {
data ( ) {
return {
name : "小李" ,
info : {
hobby : "网站" ,
} ,
mainstore : mainStore ( )
} ;
}
} ;
< / script>
< style>
< / style>
2.组件使用actions数据
< template>
< div>
< button @click= "clickButton()" > 触发actions函数< button>
< / div>
< / template>
< script>
import { mainStore } from '../store/index'
export default {
data ( ) {
return {
name : "小李" ,
info : {
hobby : "网站" ,
} ,
mainstore : mainStore ( )
} ;
} ,
methods : {
clickButton ( ) {
this . mainstore. add ( )
}
}
} ;
< / script>
< style>
< / style>