状態
新しいstore.jsファイルを作成し、デフォルトのパッケージをエクスポートして、外部が参照できるようにします
//定义一个常量
const state = {
count:1
}
//
export default new Vuex.Store({
state
})
Vueページ参照
<template>
<h3>{
{
$store.state.count}}</h3>//1
</template>
<script>
import store from '@/vuex/store'
export default{
data(){
return{
}
},
store
}
</script>
省略形、実際のプロジェクトでより多く使用
<template>
<h3>{
{
count}}</h3>//1
</template>
<script>
import {
mapState} from '@/vuex/store'
export default{
data(){
return{
}
},
computed:{
...mapState(['count'])
}
}
</script>
ゲッター
単純な理解は、状態データを取得する前にデータを処理し、処理後に戻ることです。
//这里每次获取count前会加上1
const getters = {
count:function(state){
return state.count+=1;
}
}
//
export default new Vuex.Store({
state,getters
})
ページ参照
<template>
<h3>{
{
count}}</h3>//2
</template>
<script>
import {
mapGetters} from '@/vuex/store'
export default{
data(){
return{
}
},
//注意，这里放在计算属性里
computed:{
...mapGetters(['count'])
}
}
</script>
突然変異
これは状態を変更するために使用され、簡単な理解は状態の値を変更することです
const mutations={
add(state,num){
state.count=num;
},
reduce(state){
state.count-=1;
}
}
export default new Vuex.Store({
state,getters,mutations
})
ページ参照
<template>
<h3>{
{
count}}</h3>//2=》10，点击下边按钮修改为10
<button @click="addCount(10)">-</button>
</template>
<script>
import {
mapGetters,mapMutations} from '@/vuex/store'
export default{
data(){
return{
}
},
//注意，这里放在计算属性里
computed:{
...mapGetters(['count'])
}
//注意，这里放在methods里
methods:{
...mapMutations({
addCount: 'add',//左边为自定义方法名，右边对应store.js的mutations里方法名
})
}
}
</script>
行動
アクションはミューテーションと同じです。どちらもストア内の状態を変更しますが、アクションは非同期であり、ミューテーションを同期する必要があります。
const actions ={
addAction({
commit}){
//直接把commit对象传过来
commit('add')//方法名和mutation里定义的一样
}，
reduceAction({
commit}){
commit('reduce')
}
}
export default new Vuex.Store({
state,getters,mutations，actions
})
ページ参照
<template>
<h3>{
{
count}}</h3>//2=》10，点击下边按钮修改为10
<button @click="addAction(10)">-</button>
</template>
<script>
import {
mapGetters,mapMutations,mapActions} from '@/vuex/store'
export default{
data(){
return{
}
},
//注意，这里放在计算属性里
computed:{
...mapGetters(['count'])
}
//注意，这里放在methods里
methods:{
...mapMutations({
addCount: 'add',//左边为自定义方法名，右边对应store.js的mutations里方法名
}),
...mapActions([
'addAction',
'reduceAction'
])
}
}
</script>