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

// 創(chuàng)建一個 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 () { /* ... */ },
? // 使用對象展開運算符將此對象混入到外部對象中
? ...mapState({
? ? // ...
? })
}

import Vuex from 'vuex'?
Vue.use(Vuex)
?
const store = new Vuex.Store({
//存放全局狀態(tài)
state:{
count:0
},
?
//getters是對state的加工包裝，比如將一些數(shù)據(jù)進行過濾等，為只讀的方法，通過return獲取值
getters:{
countNum(state){
return `the account NUm is ${state.count}`
}
}
?
//通過mutations修改state，如果直接修改state會導致一些特性丟失
mutations:{
?add(state){
state.count++
},
?minus(state){
state.count--
}??
}??
//actions涉及業(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必須通過commit才能使用,但是因為之前調用了...mapMutations,所以可以直接調用this.add();
//this.$store.commit('add')
this.add()
?
//使用mutations會確保有vuex狀態(tài)改變的記錄，如果直接this.$store.state.count也會生效
//this.$store.state.count++但是此種寫法開發(fā)工具vuex里面無法產生記錄
}
}
?
<javascript>
</javascript>

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

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

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

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