Vuex数据的存储与获取方式

// 创建一个新的 store 实例
const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

// 创建一个 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({
//存放全局状态
state:{
count:0
},
 
//getters是对state的加工包装，比如将一些数据进行过滤等，为只读的方法，通过return获取值
getters:{
countNum(state){
return `the account NUm is ${state.count}`
}
}
 
//通过mutations修改state，如果直接修改state会导致一些特性丢失
mutations:{
 add(state){
state.count++
},
 minus(state){
state.count--
}  
}  
//actions涉及业务逻辑，不涉及页面的一些行为 
})

<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状态改变的记录，如果直接this.$store.state.count也会生效
//this.$store.state.count++但是此种写法开发工具vuex里面无法产生记录
}
}
 
<javascript>
</javascript>

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

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

  setValue(state,item){
    state.xxx= item;//第二个参数随意起个名
  },

//在计算属性中取值,js直接这样写拿到值,html用直接xxx使用
 computed: {    
    value() {
      return this.$store.state.xxx;
    }
  },