Vuex初体验

Vuex是什么，官方文档：是一个专门为Vue.js应用程序开发的状态管理模式。
我的理解：管理数据的一个工具，也可以认为是一个对象。

Vuex
Vuex 主要有三个部分 state mutation action

state存放数据（data） mutation读写数据(method，必须是同步的) action异步操作(调用method)

const store=new Vuex.Store（{
  state:{//data 数据
   count:0
},
  mutations{//methods 数据改动
  increment(state，n:number){
    state,count+=1///不能用this，没设计这个模式。this 是window上的
      }
    }
});
 store.commit('increment',10)///调用api： commit('方法名')，字符串的形式调用

store.commit('increment',10)中 increment类型是type，10是参数，类型是payload （？？官方文档这么写的……）

单一状态树
官方文档：用一个对象包括了全部的应用层级状态
我的理解：对象，用一个对象包含了项目里的组件的数据，全局对象可以随意使用其中的数据

获取一个数据状态用computed ,computed是一个计算属性。
计算属性可以自动变更，自动的去计算，用data的话只在初始化的时候取值一次，依赖数值改变时不会自动更改

index.ts
Vue.use(Vuex);// 初始化的时候，会把store 绑到Vue.prototype上，$store=store（后一个store是用户传的），此时用户还没有传store

//main.ts
new Vue{
router,
store,（全称呼是 store：store  在此时引入了store并且传了store）
}

大概的套路是这样的

const store = new Vuex.store({
  state:{
    count:0
  },
  mutation:{
    addCount(state){
      state.count///直接改，没有返回值
}
  }
})

组件：

@Component({
////读：对象语法：computed  获取this.$store.state.count
    computed: {
      recordList() {
        return this.$store.state.count;
      })
///读：类语法（JS/TS）：get count（）{ this.$store.state.count}
      export default class EditLabel extends Vue {
       get count() {
      return this.$store.state.currentTag;
    }

获取tag的commit
///写： store.commit(' ',payload)
 state:{
   tag：undefined
  },
 mutations: { 
    setTag(state,id {
     xxxxxx
    },
 export default class EditLabel extends Vue {
       created() {
       const id = this.$route.params.id
      this.$store.commit('setTag', id);
    },
 ////读tag
 $store.state.tag;

安装：
1.Vue.use（Vuex）///index.ts

new Vue({ router,store,})////main.ts