// 創(chuàng)建一個(gè)新的 store 實(shí)例
const store = createStore({
? state () {
? ? return {
? ? ? count: 0
? ? }
? },
? mutations: {
? ? increment (state) {
? ? ? state.count++
? ? }
? }
})

// 創(chuàng)建一個(gè) Counter 組件
const Counter = {
? template: `<div>{{ count }}</div>`,
? computed: {
? ? count () {
? ? ? return store.state.count
? ? }
? }
}

const Counter = {
? template: `<div>{{ count }}</div>`,
? computed: {
? ? count () {
? ? ? return this.$store.state.count
? ? }
? }
}

computed: {
? localComputed () { /* ... */ },
? // 使用對(duì)象展開(kāi)運(yùn)算符將此對(duì)象混入到外部對(duì)象中
? ...mapState({
? ? // ...
? })
}

import Vuex from 'vuex'?
Vue.use(Vuex)
?
const store = new Vuex.Store({
//存放全局狀態(tài)
state:{
count:0
},
?
//getters是對(duì)state的加工包裝，比如將一些數(shù)據(jù)進(jìn)行過(guò)濾等，為只讀的方法，通過(guò)return獲取值
getters:{
countNum(state){
return `the account NUm is ${state.count}`
}
}
?
//通過(guò)mutations修改state，如果直接修改state會(huì)導(dǎo)致一些特性丟失
mutations:{
?add(state){
state.count++
},
?minus(state){
state.count--
}??
}??
//actions涉及業(yè)務(wù)邏輯，不涉及頁(yè)面的一些行為?
})

<template>
?
<div>
<h1>{{count}}</h1>
<h2>{{countNum}} </h2>
</div>
?
</template>

<script>?
import {mapState,mapGetters} from 'vuex'?
export default{
?
//
computed:{
...mapState(['count'])
...mapGetters{['countNum']}
}
}
</script>

<template>
<div>
<button @click=addnum>增加</button>
</div>
</template>

methods：{
...mapMutations('add','minus')
addnum（）{
//mutations必須通過(guò)commit才能使用,但是因?yàn)橹罢{(diào)用了...mapMutations,所以可以直接調(diào)用this.add();
//this.$store.commit('add')
this.add()
?
//使用mutations會(huì)確保有vuex狀態(tài)改變的記錄，如果直接this.$store.state.count也會(huì)生效
//this.$store.state.count++但是此種寫(xiě)法開(kāi)發(fā)工具vuex里面無(wú)法產(chǎn)生記錄
}
}
?
<javascript>
</javascript>

methods: { ?
? ? ?fn() { ? ??
? ? ? ? ? ? ?this.$store.commit('setValue',xxx) ? //setValue存值隨便起個(gè)名, ? xxx要存的值?
? ? ? ? ? } ? ? ? ? ??
? ? }

const state = {
? ? xxx:'',//把存的那個(gè)值的名字初始化一下
}

? setValue(state,item){
? ? state.xxx= item;//第二個(gè)參數(shù)隨意起個(gè)名
? },

//在計(jì)算屬性中取值,js直接這樣寫(xiě)拿到值,html用直接xxx使用
?computed: { ? ?
? ? value() {
? ? ? return this.$store.state.xxx;
? ? }
? },