vuex的使用

vuex的使用

个人理解vuex就是前端的数据库，在里面可以加数据让各组件都可以共享数据。对数据进行增删改查

State	共享状态（即变量）
Getter	基于state的派生状态，可理解为组件中的计算属性
Mutation	更改vuex的store中状态的唯一方法，通过提交mutation修改状态，同步操作（规则上是不允许异步操作的，虽然异步也可以执行，但是对devtool调试的状态跟踪或多个状态更改操作相互依赖是很不好的，所以不要觉得只要不报错我就可以这么用，还是尽量按照规则来比较好）
Action	类似mutation，不同之处，1.通过提交mutation修改状态 2.支持异步操作

在state中使用数据

state: {
    name: '杨浩',
    count: 1
  },

使用name这个数据：

        <h1>{{$store.state.name}}</h1>
        

也可以使用mapstation 去store映射这个count 显示到页面上
...mapState(["count"])

点击加一：

getter方法的使用

  //getters是用于 store的计算属性
  getters: {
    countinfo(state) {
      return '!!!!!!!!!!!' + state.count
    }

方法一 commit

在store中的mutations是专门定义修改元素（count）的方法

mutations: { // 作用，是专门用来修改 state 中的数据的
    // 注意：如果要修改 state 中的数据，必须要调用 mutations 提供的方法；
    add(state) {
      // mutations 中的方法，第一个参数，永远都是 state
      state.count++
      // 注意： vuex 官方，虽然说，不要在 mutations 中写异步的操作，但是，如果你不按官方的走，在 mutations 中定义的异步方法，可以正常执行，但是，vue-tools 工具，无法监视到数据的变化；
      /* setTimeout(() => {
        state.count++
      }, 1000) */
    },

通过commit 去store中 调用add方法

    increment() {
      // 点击按钮，让数值 + 1
      // console.log('ok')
      // 不推荐使用下面的方式，去修改state
      // this.$store.state.count++;
      // 如果在组件中，要调用 mutations 中的函数，只能通过 this.$store.commit() 来调用
      this.$store.commit("add");
    } 

方法二

使用mapmutation

可以从store中映射mutation的方法到组件中

    ...mapMutations(["add"]),

展开运算符的运用

合并对象

const a = [1, 2, 3]
const b = [4, 5, 6]
const c = [...a, ...b]
console.log(c);//[1,2,3,4,5,6]

在vuex中想要自定义计算属性和本身的mapstate中的数据兼容，则可以使用展开运算符
不使用展开运算符的话，computed就无法自定义自己的计算方法，只能写一个store的方法。

 computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })

就可以用展开运算写自己组件的计算属性。和store的计算属性了

//   computed: {
//     // 自定义的计算属性
//     newMsg: function() {
//       return "----" + this.msg + "------";
//     },
//     // 通过 展开运算符，把 state中的数据映射为计算属性，这样，能够让自己的计算属性和store中的属性并存
//     ...mapState(["count"])
//   }
    computed: mapState(["count"])//如果没有自定义计算属性 则可以直接赋值